Uzyskiwanie i przekazywanie danych modelu MVC do kontrolera AngularJS

Question

Jestem całkiem nowym użytkownikiem AngularJS i nie mam tu żadnych szans.

W tej chwili mój program MVC używa Razor do wyświetlania wszystkich danych w mojej bazie danych .mdf (tj .: @ Html.DisplayFor (modelItem => item.LastName)). Jednak chcę przejść głównie Angular. Próbuję użyć polecenia ng-repeat, aby wyświetlić wszystkie dane modelu, ale nie mam pewności, jak przekazać dane modelu do kontrolera Angular, a następnie użyć go. Próbowałem serializacji modelu do JSON w moim ng-init, ale nie sądzę, że robię to dobrze (oczywiście).

Oto mój kod:

// controller-test.js 
 

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

 
myApp.controller('myController', function ($scope) { 
 
    $scope.init = function (firstname) { 
 
     $scope.firstname = firstname; 
 
    } 
 
});

<!-- Index.cshtml --> 
 

 
@model IEnumerable<Test.Models.Employee> 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<div ng-app="myModule"> 
 
    <div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"> 
 
     <table> 
 
      <tr ng-repeat= <!--THIS IS WHERE I'M STUCK --> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<script src="~/Scripts/angular.min.js"></script> 
 
<script src="~/Scripts/controller-test.js"></script> 
 
@Scripts.Render("~/Scripts/angular.js")

nie jestem pewien dokładnie to, co należy powtarzać do uzyskania FirstName z serializowanym Model. Czuję, że mam wszystkie elementy, ale nie wiem, jak je połączyć.

Answer 1

Jeśli masz klucz firstName na obiekt JSON jak:

{ 
"employees":[ 
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter","lastName":"Jones"} 
    ] 
} 

Można to zrobić w następujący sposób.

Na kontrolerze:

myApp.controller('myController', function ($scope) { 
    $scope.init = function (employees) { 
     $scope.employees = employees; 
    } 
}); 

Na widoku:

<table> 
    <tr ng-repeat= "employee in employees"> 
     <td>{{ employee.firstName }}<td> 
    </tr> 
</table> 

Answer 2

Dziękuję darkstalker_010!

To, co mnie myliło, to to, w jaki sposób mój plik kontrolera Angulara wchodzi w interakcję z widokiem. Wszystko co musiałem zrobić, to po prostu traktować moje kanciaste {{}} danych w moim .cshtml pliku jakbym próbował uzyskać dostęp do danych modelu normalnie (tj model.AttributeName)

Więc tutaj jest aktualizowany, kod działa:

// controller-test.js 
 

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

 
myApp.controller('myController', function ($scope) { 
 
    $scope.init = function (employees) { 
 
     $scope.employees= employees; 
 
    } 
 
});

<!-- Index.cshtml --> 
 

 
@model IEnumerable<Test.Models.Employee> 
 

 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<div ng-app="myModule"> 
 
<div ng-controller="myController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"> 
 
      <table> 
 
       <tr> 
 
        <th>First Name</th> 
 
        <th>Last Name</th> 
 
        <th>Title</th> 
 
        <th>Department</th> 
 
        <th>Email</th> 
 
       </tr> 
 
       <tr ng-repeat="e in employees"> 
 
        <td>{{e.FirstName}}</td> 
 
        <td>{{e.LastName}}</td> 
 
        <td>{{e.Title}}</td> 
 
        <td>{{e.Department.DepartmentName}}</td> 
 
        <td>{{e.Email}}</td> 
 
       </tr> 
 
      </table> 
 
</div> 
 
</div> 
 

 

 
<script src="~/Scripts/angular.min.js"></script> 
 
<script src="~/Scripts/controller-test.js"></script> 
 
@Scripts.Render("~/Scripts/angular.js")

Oto jak to wygląda sans formatowania: