[英]Getting and passing MVC Model data to AngularJS controller
我對AngularJS很新,我在這里不知所措。
現在我的MVC程序使用Razor顯示我的.mdf數據庫中的所有數據(即: @ Html.DisplayFor(modelItem => item.LastName) )。 但是,我想主要是Angular。 我正在嘗試使用ng-repeat來顯示所有Model數據,但我不確定如何將該Model數據傳遞給Angular控制器然后使用它。 我已經嘗試在我的ng-init中將Model序列化為JSON,但我認為我做得不對(顯然)。
這是我的代碼:
// 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")
我不確定我應該重復從序列化模型中獲取FirstName。 我覺得我有所有的部分,但只是不確定如何連接它們。
如果你的Json對象上有key firstName
,比如:
{
"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>
謝謝darkstalker_010!
我感到困惑的是我的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")
這是sans格式化的樣子:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.