AngularJs对已经插入的数据进行排序

我一直试图在点击时对表格数据进行排序（ng-click，如果我使用angularJS）我从database.I获取数据只需要排序功能，如果它通过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标签

谢谢

来源

2015-07-06 Arjun

有在AngularJS排序表滤波器，他的名字是排序依据（documentation）

目前，您不能使用你的代码，因为排序依据过滤器仅工作，如果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-初始化属性：

<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

来源

2015-07-06 10:05:23

哦，那很伤心，我可以绑定我的MVC模型数据AngularJs 我的意思就像我们绑定JSON数据 var people = []; 例如：$ scope.People = json.data – Arjun

哦，那很伤心，我可以绑定我的MVC模型数据到AngularJs 我的意思是像我们绑定JSON数据 var app = angular.module（'studentApp'，[]）; app.controller（ 'StudntCtrl'，函数（$范围，$ HTTP）{ htp.get（ 'Student.json'）成功（功能（数据）{$ = scope.People数据; }）; }）; 像明智的我可以将MVC模型数据绑定到$ scope.People？ – Arjun

是的，你可以使用ng-init：[example]（http://www.w3schools.com/angular/angular_directives.asp）在你的视图中设置变量。然后，你可以通常在你的控制器中使用它。 –

哦，那很伤心，我可以将我的MVC模型数据绑定到AngularJs 我的意思是像我们绑定

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

像明智的我可以绑定MVC模型数据$ scope.People JSON数据???

来源

2015-07-06 10:15:58 Arjun

AngularJs对已经插入的数据进行排序

回答

相关问题