Сортировка таблицы с выбранным вводом

Question

Сортировка таблицы с выбранным вводом

0

У меня есть следующая структура:

$scope.friends = [
  { name:'John', phone:'555-1212', age:10 },
  { name:'Mary', phone:'555-9876', age:19 },
  { name:'Mike', phone:'555-4321', age:21 },
  { name:'Adam', phone:'555-5678', age:35 },
  { name:'Julie', phone:'555-8765', age:29 }
];

И я хочу отсортировать его по имени, телефону или возрасту, используя select input, например:

<select class="sortBy" ng-model="sort" ng-change="order(predicate)">
  <option value="name" ng-click="order('name')" ng-selected="predicate === 'name'">Name</option>
  <option value="phone" na-click="order('phone')" ng-selected="predicate === 'phone'">Phone</option>
  <option value="age" ng-click="order('age')" ng-selected="predicate === 'age'">Age</option>
</select>

Это то, что я придумал. Функция заказа:

$scope.order = function(predicate) {
  alert(predicate);
  $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
  scope.predicate = predicate;
};

Но он создает другой вариант, пустой. И значения, когда я меняю выбор, установлены неправильно. Как я могу это сделать?

khernik 04 авг. 2015, в 21:44

Источник

0

Можете ли вы опубликовать свой код ng-repeat .
tymeJV 04 авг. 2015, в 19:00
0

Невозможно использовать событие click для <option> , не поддерживается кросс-браузер. Также не имеет смысла использовать ng-model и ng-selected вместе ... просто используйте переменную ng-model для упорядочения
charlietfl 04 авг. 2015, в 19:01

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Можете ли вы опубликовать свой код ng-repeat .
Невозможно использовать событие click для <option> , не поддерживается кросс-браузер. Также не имеет смысла использовать ng-model и ng-selected вместе ... просто используйте переменную ng-model для упорядочения

Pankaj Parkar · Accepted Answer · 2015-08-04T16-56-00.000Z

Я бы предложил вам применить сортировку ng-model непосредственно к фильтру orderBy, не нужно создавать пользовательскую функцию для создания функции для сортировки и вызова ее на ng-click

Еще одно предложение состоит в том, чтобы преобразовать опции выбора в опции ng-options которые были бы более правильными.

наценка

<select class="sortBy" ng-options="prop for prop in props" ng-model="sort"></select>

<table class="friend">
  <tr>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Age</th>
  </tr>
  <tr ng-repeat="friend in friends | orderBy:sort">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>

контроллер

$scope.props = ["name","phone","age"]

Рабочий Plunkr

Но все же, что если я захочу создать еще один фильтр с порядком asc / desc?