Получение и передача данных модели MVC контроллеру AngularJS
Я новичок в AngularJS, и я здесь в затруднении.
Сейчас моя MVC-программа использует Razor для отображения всех данных в моей базе данных .mdf(например: @Html.DisplayFor(modelItem = > item.LastName)). Тем не менее, я хочу пойти в основном Angular. Я пытаюсь использовать ng-repeat для отображения всех данных модели, но я не уверен, как передать данные модели контроллеру Angular, а затем использовать его. Я попробовал сериализацию модели для JSON в моем ng-init, но я не думаю, что я делаю это правильно (очевидно).
Вот мой код:
// 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")
Ответы
Ответ 1
Если у вас есть ключ firstName на вашем объекте Json, например:
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
]
}
Вы можете сделать это следующим образом.
На вашем контроллере:
myApp.controller('myController', function ($scope) {
$scope.init = function (employees) {
$scope.employees = employees;
}
});
По вашему мнению:
<table>
<tr ng-repeat= "employee in employees">
<td>{{ employee.firstName }}<td>
</tr>
</table>
Ответ 2
Спасибо darkstalker_010!
Что меня смутило, так это то, как мой файл управления Angular взаимодействовал с представлением. Все, что мне нужно было сделать, это просто обработать мои данные Angular {{}} в моем файле .cshtml, как если бы я пытался получить доступ к данным модели обычно (например, model.AttributeName)
Итак, вот обновленный рабочий код:
// 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")
