获取MVC模型数据并将其传递给AngularJS控制器

Question

我对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.我觉得我有所有的部分,但只是不确定如何连接它们.

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>

Answer 2

谢谢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格式化的样子: