排序使用Angularjs MVC剃刀UI表 [英] Sorting MVC razor UI table using Angularjs
问题描述
我有一个要求，在我的MVC剃刀UI排序表。使用MVC和脚手架选项绑定到一个模型生成的表。在code看起来像下面
I have a requirement to sort a table in my MVC razor UI. The table was generated using scaffolding option in MVC and bound to a model. The code looks something like below
@model IEnumerable<Avanade.Bureau.DataAccessLayer.DatabaseModel.SubscriptionType>
@{
ViewBag.Title = "Subscriptions";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Subscriptions</h2>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Code)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr ng-repeat="table in Model | orderBy:predicate:reverse">
<td>
@Html.DisplayFor(modelItem => item.Code)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Subscribe", "Index", "Subscription", new { id = item.Id }, null)
</td>
</tr>
}
</table>
我想用Angularjs做sorting.All，我已经看到，在视图中硬codeD数据迄今所采取的例子显示的例子。正如你可以看到我的看法，势必经由控制器从数据库中获取数据模型。可能有人帮助。
I want to use Angularjs to do sorting.All the examples that I have seen so far taken show examples of data that is hardcoded in the view. As you can see my view is bound to the model which gets the data from the database via the controller. Could someone help.
推荐答案
您可以通过先初始化AngularJS数据，然后显示它做到这一点：
You can do it by first initializing AngularJS data and then showing it:
@model IEnumerable<Avanade.Bureau.DataAccessLayer.DatabaseModel.SubscriptionType>
@{
ViewBag.Title = "Subscriptions";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular-animate.js"></script>
<body ng-app ="ngAnimate">
<h2>Subscriptions</h2>
<div ng-init="data = [
@foreach (var item in Model) {
<text>{id: '@item.Id' , code: '@item.Code' , description: '@item.Description' },</text>
}
]">
</div>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Code)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th></th>
</tr>
<tr ng-repeat="model in data">
<td class="first">{{model.id}}</td>
<td>{{model.code}}</td>
<td>{{model.description}}</td>
</tr>
</table>
</body>
这篇关于排序使用Angularjs MVC剃刀UI表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
