获取 MVC 模型数据并将其传递给 AngularJS 控制器 [英] Getting and passing MVC Model data to AngularJS controller
问题描述
我对 AngularJS 还很陌生,在这里我不知所措.
现在我的 MVC 程序使用 Razor 来显示我的 .mdf 数据库中的所有数据(即:@Html.DisplayFor(modelItem => item.LastName)).但是,我想主要使用 Angular.我正在尝试使用 ng-repeat 来显示所有模型数据,但我不确定如何将该模型数据传递给 Angular 控制器然后使用它.我曾尝试在我的 ng-init 中将模型序列化为 JSON,但我认为我做得不对(显然).
这是我的代码:
//controller-test.jsvar myApp = angular.module('myModule', []);myApp.controller('myController', function ($scope) {$scope.init = 函数(名字){$scope.firstname = 名字;}});
@model IEnumerable@{ViewBag.Title = "索引";}<div ng-app="myModule"><div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))"><表格><tr ng-repeat= <!--这就是我卡住的地方-->
<script src="~/Scripts/angular.min.js"></script><script src="~/Scripts/controller-test.js"></script>@Scripts.Render("~/Scripts/angular.js")
我不确定我应该重复什么才能从序列化模型中获取 FirstName.我觉得我拥有所有的部分,但只是不确定如何将它们连接起来.
如果你的 Json 对象上有键 firstName
像:
<代码>{雇员":[{"firstName":"John", "lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}]}
您可以通过以下方式进行.
在您的控制器上:
myApp.controller('myController', function ($scope) {$scope.init = 函数(员工){$scope.employees = 员工;}});
在您看来:
<tr ng-repeat="员工中的员工"><td>{{employee.firstName }}<td></tr>
I'm pretty new to AngularJS and I'm at a loss here.
Right now my MVC program uses Razor to display all the data in my .mdf database (i.e: @Html.DisplayFor(modelItem => item.LastName) ). However, I want to go mostly Angular. I am trying to use ng-repeat to display all of the Model data, but I am not sure how to pass that Model data to the Angular controller and then use it. I have tried serializing the Model to JSON in my ng-init, but I don't think I'm doing it right (obviously).
Here is my code:
// 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")
I'm not sure exactly what I should be repeating on to get the FirstName from the serialized Model. I feel like I have all the pieces, but just unsure how to connect them.
If you have the key firstName
on your Json object like:
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
]
}
You can do it in the following way.
On your controller:
myApp.controller('myController', function ($scope) {
$scope.init = function (employees) {
$scope.employees = employees;
}
});
On your view:
<table>
<tr ng-repeat= "employee in employees">
<td>{{ employee.firstName }}<td>
</tr>
</table>
这篇关于获取 MVC 模型数据并将其传递给 AngularJS 控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!