获取和传递MVC模型数据到AngularJS控制器

Question

我是AngularJS的新手，在这里我很茫然。

现在，我的MVC程序使用Razor来显示.mdf数据库中的所有数据（即 @ Html.DisplayFor（modelItem = >
item.LastName）
）。但是，我想主要使用Angular。我正在尝试使用ng-
repeat显示所有Model数据，但是我不确定如何将那个Model数据传递给Angular控制器然后使用它。我曾尝试在ng-
init中将模型序列化为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到底应该重复什么。我感觉自己已经准备就绪，但是不确定如何连接它们。

Answer 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>