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

How do I identify my model object in my view using angular module?

本文关键字:识别 模型 对象 视图 何使用 模块      更新时间:2023-09-26

当前,我的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);