AngularJs对已插入数据的排序表答案

【问题标题】：AngularJs Sort Table on already inserted dataAngularJs对已插入数据的排序表
【发布时间】：2015-07-06 18:51:51
【问题描述】：

我一直在尝试在单击时对表数据进行排序（如果我使用 angularJS，则单击 ng-click）我正在从数据库中获取数据。我只需要排序功能，如果它通过 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>

当他们点击相应的标签时，我需要对名字、姓氏进行排序

谢谢

【问题讨论】：

标签： asp.net-mvc angularjs html

【解决方案1】：

AngularJS中有一个排序表过滤器，他的名字叫OrderBy(documentation)

目前，您不能在您的代码中使用它，因为 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 的力量......

解决方案：

解决方案是使用 ng-init 属性：

<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

【讨论】：

哦，太难过了，我可以将我的 MVC 模型数据绑定到 AngularJs 我的意思是我们绑定 JSON 数据 var people = [];例如：$scope.People = json.data
哦，太可悲了，我可以将我的 MVC 模型数据绑定到 AngularJs 我的意思是我们绑定 JSON 数据 var app = angular.module('studentApp', []); app.controller('StudntCtrl', function($scope, $http) { htp.get('Student.json').success(function(data){ $scope.People = data; }); });同样，我可以将 MVC 模型数据绑定到 $scope.People ???
是的，您可以使用 ng-init 在视图中设置变量：example。然后，您可以在控制器中通常使用它。

【解决方案2】：

哦，太难过了，我可以将我的 MVC 模型数据绑定到 AngularJs 我的意思是我们绑定 JSON 数据

var app = angular.module('studentApp', []);
app.controller('StudntCtrl', function($scope, $http) {
    htp.get('Student.json').success(function(data){
        $scope.People = data;
    });
});

同样，我可以将 MVC 模型数据绑定到 $scope.People 吗？？？

【讨论】：