Таблица сортировки AngularJs по уже вставленным данным

0

Я пытался сортировать данные таблицы при щелчке (ng-click, если я использую 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>

Мне нужно отсортировать firstName, LastName, когда они нажимают на соответствующий тег

благодаря

Теги:
asp.net-mvc

2 ответа

0
Лучший ответ

В 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...

Решение :

Решением было бы использовать атрибут 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
Поделиться
  • 0
    о, это так грустно, могу ли я связать мои данные модели MVC с AngularJ, я имею в виду, как мы связываем данные JSON var people = []; например: $ scope.People = json.data
  • 0
    о, это так грустно, могу ли я связать свои данные модели MVC с AngularJ, я имею в виду, что мы связываем данные 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 ???
Показать ещё 2 комментария
0

о, это так грустно, могу ли я привязать данные модели 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???

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню