Why is this angularjs code not working?

Question

Everybody else's fiddle is working, I based my code on theirs but for some reason it is not working.

I am seeing the curly brackets which usually disappear when angular kicks in.

HTML

<div ng-controller="MyCtrl">
    <table>
        <thead>
            <th>Name</th>
            <th>Age</th>
        </thead>
        <tr ng-repeat="person in people">
            <td>{{name}}</td>
            <td>{{age}}</td>
        </tr>
    </table>
</div>

JS

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.people = [{
        name: "test",
        age: 18
    }, {
        name: "test2",
        age: 18
    }, {
        name: "Test1",
        age: 18
    }];
}

Kyle Muir · Accepted Answer · 2015-10-22 01:32:02Z

2

Two things:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <table>
            <thead>
                <th>Name</th>
                <th>Age</th>
            </thead>
            <tr ng-repeat="person in people">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
            </tr>
        </table>
    </div>
</div>

Missing ng-app

And not using person.name, person.age

Updated fiddle: http://jsfiddle.net/KyleMuir/prarg2zg/4/

answered Oct 22, 2015 at 1:32

Kyle Muir

3,9252 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

agconti · Accepted Answer · 2015-10-22 01:30:55Z

Name and age are not in scope, but each person is. Pull the properties off of person like you've structured in your controller:

<div ng-controller="MyCtrl">
    <table>
        <thead>
            <th>Name</th>
            <th>Age</th>
        </thead>
        <tr ng-repeat="person in people">
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
        </tr>
    </table>
</div>

You also need to register your controller to your app:

var myApp = angular.module('myApp', []);



function MyCtrl($scope) {
    $scope.people = [{
        name: "test",
        age: 18
    }, {
        name: "test2",
        age: 18
    }, {
        name: "Test1",
        age: 18
    }];
}

myApp.controller('MyCtrl', ['$scope', MyCtrl]);

Working in a fiddle: http://jsfiddle.net/prarg2zg/5/

Good point about registering the controller - weird how I haven't done it in my fiddle and angular somehow wires it up.

Collectives™ on Stack Overflow

Why is this angularjs code not working?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related