如何使用角度模块在视图中识别模型对象

本文关键字：识别 模型 对象 视图 何使用 模块 | 更新日期: 2023-09-27 18:27:29

当前，我的viewModel从我的控制器传递到我的视图，并填充列表。我可以在我的视图中引用我的模型，目前就像模型一样。

然而，如果我想做这样的事情：

<table style="margin-top:20px" cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        <tr ng-show="users != null" ng-repeat="user in users">
            <td>{{user.FirstName}}</td>
            <td>{{user.LastName}}</td>
        </tr>
    </table>

当我调试视图时，用户没有被定义或识别，尽管"Model"是，而且它有我想要的正确值。我熟悉razor语法，熟悉通过razor获取模型或检查模型，但如果我想在上面做foreach循环，但使用ng重复，该怎么办？我如何确保我的控制器提供了正确的Model引用？

其中Users是我从中获取数据的模型，它正在被持久化。

如何使用角度模块在视图中识别模型对象

Razor在服务器上执行，angular在客户端。因此，您不能在客户端代码中简单地访问服务器端模型。

您可以做的是，在您的剃刀视图中，序列化模型并创建数据的json表示，然后使用value提供程序将此对象注入到角度控制器中。

所以在你看来，

@model YourViewModel
<div ng-app="app" ng-controller="ctrl as vm">
    <table style="margin-top:20px" cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
        <tr ng-show="vm.users != null" ng-repeat="user in vm.users">
            <td>{{user.Name}}</td>
            <td>{{user.Name}}</td>
        </tr>    
    </table>
</div>
@section Scripts{   
  <script src="~/Scripts/YourAngularController.js"></script>    
  <script>
    var m = angular.module("app")
         .value("pageModel",@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
  </script>    
}

在YourAngularController.js文件中的角度控制器中，

var app = angular.module("app", []);
var ctrl = function (pageModel) {
    var vm = this;
    vm.users = pageModel; //assuming pageModel is a list of users
};
app.controller("ctrl", ctrl);
相关文章：