CODEWITHSUNDEEP
htmlasp.net-mvcangularjs
Arjun
Arjun

Reputation: 516

MVC Model List to AngularJs

I do have a Model that have studentID, firstName, LastName, PhotoURL and a list, I tried to bind the model to angularJs like this

var app = angular.module('StudentApp', []);
app.controller('StudentCtrl', function ($scope) {
    $scope.model = @Html.Raw(Json.Encode(Model));
    console.log($scope.model);
});

when i console.log it showing me like this

Object {StudentID: 0, FirstName: null, LastName: null, PhotoURL: null, _StudentList: Array[5]}

FirstName: null LastName: null PhotoURL: null StudentID: 0 _StudentList:Array[5]
0: Object 
    FirstName: "John"
    LastName: "Doe"
    PhotoURL: "phone-wallpaper-1920x1200.jpg"
    StudentID: 5 
    _StudentList: null__proto__: 
1: Object 
    FirstName: "Ahri"
    LastName: "Fox"
    PhotoURL: "ahri-wallpaper-1920x1200.jpg"
    StudentID: 6 
    _StudentList: null__proto__: 
Object2: 
Object3: 
Object4:

It means that I got the data of five students, now i want to use ng-repeat and print those five student data

i tried like this

<table class="table" ng-app="StudentApp">
<tbody ng-controller="StudentCtrl">
    <tr>
        <th>Key</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Profile picture</th>
        <th>Options</th>
    </tr>
    <tr ng-repeat="student in $scope.model._StudentList">
        <td></td>
        <td>{{student.FirstName}}</td>
        <td>{{student.LastName}}</td>
    </tr>
}
</tbody>

but its not working

wherever if i console log like this its working

console.log($scope.model._StudentList[0].FirstName);
console.log($scope.model._StudentList[0].LastName);

its printing John Doe

Upvotes: 0

Views: 1222

Answers (1)

katmanco
katmanco

Reputation: 1212

You should not use $scope in ng-repeat just make it model._StudentList then it will work .

Upvotes: 2

Related Questions