CODEWITHSUNDEEP
javascriptangularjs
wootscootinboogie
wootscootinboogie

Reputation: 8695

Angular JS passing ng-repeat $index as parameter

The following bit of code has a shell page index.html and a partial view (which is currently being used by two different controllers). The hard-coded data in AppController is wired into the list.html partial view and rendered as a table. In the JS I added a console.log to see when the controllers were being invoked. When the app loads up AppController fires, when I invoke #/new, NewController fires. However, when I click on the edit button which is next to each row, the EditController isn't being called. EditController should use the /partials/edit.html view but populate the fields with the information of the row that was clicked on. So crew[0] in this example is Picard and his data should be pre-populated when you click on that icon. I'm not getting any errors, but the EditController's view isn't being injected when it should be.

JS

angular.module('enterprise', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when("/", { templateUrl: "/partials/list.html" })
            .when("/new", { templateUrl: "/partials/edit.html", controller: "NewController" })
            .when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController" });
    })
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
    $scope.crew = [
        { name: 'Picard', description: 'captain' },
        { name: 'Riker', description: 'number 1' },
        { name: 'Word', description: 'Security' }
    ];
        console.log('app controller hit');        
}
function NewController($scope, $location) {
    $scope.person = { name: "", description: "" };
    $scope.save = function () {
        $scope.crew.push($scope.person);
        $location.path("/");
    }
    console.log('new controller hit');
}
function EditController($scope, $location,$routeParams) {
    $scope.person = $scope.crew[$routeParams.id];
    console.log('edit controller hit');
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Routing</title>
    <link rel="stylesheet"
          href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
          rel="stylesheet">
</head>
<body>
<div ng-app="enterprise" ng-controller="AppController">
    <a href="#"><h2>Enterprise Crew</h2></a>
    <ng-view></ng-view>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

list.html

<table class="table table-striped" style="width: 250px">
    <thead>
    <tr>
        <td>Name</td>
        <td>Description</td>
        <td> <a href="#/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

        </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="person in crew">
        <td>{{person.name}}</td>
        <td>{{person.description}}</td>
        <td><a href="#/edit/{{$index}}"><i class="glyphicon glyphicon-edit"></i></a></td>
     as ng-repeat loops through I'm trying to go to the edit.hml partial view and populate the text boxes in `edit.html` with the data from the row that was clicked on
    </tr>
    </tbody>

</table>

edit.html

<form action="">
    <input ng-model="person.name"/ placeholder="Enter the person name">
    <input ng-model="person.description"/ placeholder="Enter the description">
    <button ng-click="save()" class="btn-primary">Save</button>
</form>

I'm not getting any errors, but my EditController is never being fired. Can someone let me know why? Thanks.

Upvotes: 0

Views: 3184

Answers (1)

troynt
troynt

Reputation: 1912

"/edit:id" should instead be "/edit/:id" in

.when("/edit:id", { templateUrl: "/partials/edit.html", controller: "EditController" });

Upvotes: 2

Related Questions