Question

我一直试图在点击时对表数据进行排序（如果我使用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>

我需要在点击相应的标签

时对firstName，LastName进行排序

由于

Answer 1

AngularJS中有一个排序表过滤器，他的名字是OrderBy（documentation）

目前，您无法将其与您的代码一起使用，因为只有 AngularJS将自己写入表格时，OrderBy过滤器才有效。

示例：

<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

Answer 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 ???

AngularJs已插入数据的排序表

2 个答案: