[asp.net-mvc]AngularJs 排序表上已插入的数据

发布时间: 2016/9/30 1:23:38
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我一直试图排序表数据上单击 (吴单击如果我使用 angularJS) 我从数据库获取数据。我只需要排序的功能,如果碰巧通过 angularJs 我会很高兴

这就是我现在做直到,我没做一样我新的 AngularJS

@model WebApplication3.Models.StudentModel

@{
    ViewBag.Title = "Index";
}

<h2>Students</h2>

<div><button class="create btn btn-success"><span class="glyphicon glyphicon-plus"></span> Create New</button></div>
<br/>
<table class="table" ng-app="StudentApp">
    <tbody ng-controller="StudentCtrl">
    <tr>
        <th>Key</th>
        <th ng-click="">First Name</th>
        <th ng-click="">Last Name</th>
        <th>Profile picture</th>
        <th>Options</th>
    </tr>
    @foreach (var student in Model._StudentList)
    {
        <tr>
            <td>@student.StudentID</td>
            <td>@student.FirstName</td>
            <td>@student.LastName</td>
            <td>
            <a class="example-image-link" href="~/Images/@student.PhotoURL" data-lightbox="example-set" data-title="@student.FirstName @student.LastName profile Picture"><img class="example-image" width="60" height="40" src="~/Images/@student.PhotoURL" alt="" /></a>
            </td>
            <td>
            <a href="#" class="edit" data-studentid="@student.StudentID"><span class="glyphicon glyphicon-pencil img-rotate" title="Edit"></span></a> 
             &nbsp;<a href="#" class="details" data-studentid="@student.StudentID"><span class="glyphicon glyphicon-exclamation-sign img-rotate" title="Infomation"></span></a> 
             &nbsp;<a href="#" class="delete" data-studentid="@student.StudentID"><span class="glyphicon glyphicon-remove img-rotate" title="Remove"></span></a>
        </td>
    </tr>
}
</tbody>
</table>

我需要排序名字,姓氏当他们点击各自 th 标记

谢谢你

解决方法 1:

AngularJS,他的名字叫 OrderBy (文档) 还有一个排序表筛选器

目前,您不能使用,与您的代码,因为 OrderBy 筛选器仅适用如果AngularJS 是他本人写的表

示例︰

<table class="friend">
<tr>
  <th>
    <a href="" ng-click="order('name')">Name</a>
    <span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
  </th>
  <th>
    <a href="" ng-click="order('phone')">Phone Number</a>
    <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
  </th>
  <th>
    <a href="" ng-click="order('age')">Age</a>
    <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
  </th>
</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>
</table>

你的情况,表写在视图中,和我觉得只有这样做它现在与您的代码,使用 jQuery 插件。 可悲的是,你松散的 AngularJS 的力量......

解决方法︰

解决办法是使用吴初始化属性︰

<div ng-app="" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">

<ul>
     <li ng-repeat="x   in names">
         {{ x.name + ', ' + x.country }}
     </li>
</ul>
</div>

你可以像使用名称变量使用在您的控制器︰

console.log($scope.names); // Display the names
官方微信
官方QQ群
31647020