AngularJS - stops working when using controllers

Question

So I'm just now starting to get into angularJS and things were fine with tests until I got into using controllers with ng-repeat. It seems that when I use it it just doesn't connect to the controller.

I checked everything. The scope is fine and the location to the angular.js library is fine but the list just will not show up for some reason. This even happened with some copy paste examples as well, as I took those to see if there was an error in what i came up with, also used older version of the library, same effect, nothing gets put in the list.

<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
</head>
<body>
    <div class="contrainer" ng-controller="SimpleController">
        <h3>Simple Controller Test</h3>
        <br />
        Name:
        <br />
        <input type="text" ng-model="name" />
        <ul>
            <li ng-repeat="chara in characters">
                {{chara.name}} - {{chara.location}}
            </li>
        </ul>
    </div>
    <script>
    function SimpleController($scope) {

        $scope.characters = [
            {name: 'Link', location: 'Hyrule'},
            {name: 'Pit', location: 'Angel Land'},
            {name: 'Samus', location: 'Brinstar'}
            {name: 'Takamaru', location: 'Japan'}
        ];
    }
    </script>
</body>
</html>

score 0 · Answer 1 · answered Jul 16 '13 at 18:27

0

Couple things wrong here:

1) Invalid syntax when defining your list. Missing a comma after the 3rd item.

  $scope.characters = [
        {name: 'Link', location: 'Hyrule'},
        {name: 'Pit', location: 'Angel Land'},
        {name: 'Samus', location: 'Brinstar'},
        {name: 'Takamaru', location: 'Japan'}
    ];

2) You aren't referencing the characters by the name you chose to represent each one as.

   <li ng-repeat="character in characters">
       {{character.name}} - {{character.location}}
   </li>

answered Jul 16 '13 at 18:27

James Kleeh

12,094
5
34
61

Make sure you look at your JavaScript console so you can debug these items yourself (Especially the first item). – James Kleeh Jul 16 '13 at 18:29
Ah, okay I got that, yeah I was changing a lot of stuff around trying to figure out what was wrong and things just got worse. Still doesn't explain the copy in paste examples but. I'll look into that on my own I guess. Thanks! – Alex Howell Jul 16 '13 at 18:30

score -1 · Answer 2 · answered Jul 16 '13 at 18:27

-1

Put the ng-controller directive in the <li> tag.

  <ul>
        <li ng-repeat="chara in characters" ng-controller="SimpleController">
            {{chara.name}} - {{chara.location}}
        </li>
    </ul>

answered Jul 16 '13 at 18:27

Code Whisperer

22,959
20
67
85

The controller directive was fine where it was. You would be missing the ng-model directive from binding to the controller's scope in this case. – James Kleeh Jul 16 '13 at 18:28

AngularJS - stops working when using controllers

2 Answers2