Angularjs 将 $scope 分配给预先存在的 MVC 模型数据答案

【问题标题】：Angularjs to assign $scope to preexisting MVC model dataAngularjs 将 $scope 分配给预先存在的 MVC 模型数据
【发布时间】：2015-08-20 20:54:02
【问题描述】：

所以我将 ASP.NET 与 MVC 5 结合使用。我有一个名为“Employee”的模型，它包含一个“FirstName”值。我有一个员工列表，我正在尝试使用 Angular 来获取 Employee 中的所有“名字”，然后将它们简单地显示在列表中。

我假设我需要一个范围来执行此操作，那么如何将所有 FirstName 值分配给一个范围？

这里有一些代码

// Controller.js

var myApp = angular.module('myModule', []);
myApp.controller('myController', function ($scope) { 
   $scope firstnames;
});

Index.cshtml

@model IEnumerable<Test.Models.Employee>

<html ng-app="myModule">
    <div ng-controller="myController">
        <script>
            var nameArray = [];
            @foreach (var d in Model)
            {
              @:nameArray.push("@d.FirstName");
            }

            firstnames = nameArray;
        </script>

        <li ng-repeat="name in firstnames">
            {{name}}
        </li>
    </div>
</html>

所以脚本在成功收集所有值的意义上工作，除了我无法将它传递给范围。

我在网上查了一下，人们正在使用 $http 或 JSON 序列化。我试图实现一些我看到的例子，但无济于事。谁能帮帮我？

【问题讨论】：

标签： javascript asp.net asp.net-mvc angularjs asp.net-mvc-4

【解决方案1】：

<html> 没有<body> 标签？无论如何，尝试在实际控制器代码中推送模型：（我将 html 更改为 div）

@model IEnumerable<Test.Models.Employee>

<div ng-app="myModule">
  <div ng-controller="myController">    
     <li ng-repeat="name in firstnames">
        {{name}}
     </li>
  </div>
</div>

<script>
  var myApp = angular.module('myModule', []);
  myApp.controller('myController', function ($scope) { 
    $scope.firstnames = []
    @foreach (var d in Model)
    {
      @:$scope.firstnames.push("@d.FirstName");
    }  
  });
</script>

【讨论】：