Угловая сортировка по вычисленному значению

Question

Угловая сортировка по вычисленному значению

0

У меня есть приложение, в котором я показываю список элементов, каждый из которых имеет разные свойства, и одно из этих свойств используется для получения другого значения с фабрики, и я хочу иметь возможность сортировать список по этому расчетному значению.

Я знаю, что могу сохранить вычисленное значение в списке, а затем отсортировать, но это единственный способ?

Это моя скрипка и код

angular
  .module("app", [])
  .controller('Controller', Controller)
  .factory('factory', factory)
  .directive('val', val)
  .controller('ValController', ValController)

  DirectiveController.$inject = [ 'factory'];

function Controller() {
  var vm = this;

  vm.results = [{
    "id": "1",
    "pos": 1
  }, {
    "id": "2",
    "pos": 2
  }, {
    "id": "3",
    "pos": 3
  }, {
    "id": "4",
    "pos": 4
  }];

  console.info(JSON.stringify(vm.results));
}

function val() {
    return {
            replace: true,
            scope: {},
            bindToController: {
                id: '@'             
            },
            controller: ValController,
            controllerAs: 'vm',         
            template: '<td ng-bind="vm.value"></td>'
        };
}

function ValController(factory) {

    var vm = this;

  vm.value = factory.getValue(vm.id);
}

function factory() {

  var values = {
    '1': 'green',
    '2': 'blue',
    '3': 'yellow',
    '4': 'red'
  };

  return {
    getValue: function(id) {
      return values[id];
    }
  }
}

И простой html

<div>
  <table>
    <thead>
      <tr>
        <th>id</th>
        <th>pos</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="result in vm.results | orderBy:'+value'">
        <td ng-bind="result.id"></td>
        <td ng-bind="result.pos"></td>
        <td val id="{{result.id}}"></td>
      </tr>
    </tbody>
  </table>
</div>

Большое спасибо!

David 28 янв. 2016, в 13:25

Источник

Теги:

angularjs

sorting

angularjs-directive

1 ответ

Ещё вопросы

charlietfl · Accepted Answer · 2016-01-28T10-07-00.000Z

Для этого, поскольку значение свойства само по себе не отражает вид, существует множество способов сделать это. Если вы не измените сами элементы другим свойством, вам потребуется отсортировать себя в одном месте

Пользовательский фильтр удобен, так как вы можете ввести в него завод. Поскольку фильтр используется в массиве, верните отсортированный массив на основе сопоставления значений с фабрики на элемент

.filter('valueSort',function(factory){    
     return function(items){
        if(!items) return;
        return items.sort(function(a, b){
            return factory.values[a.pos] > factory.values[b.pos];
        });        
     }  
});

Посмотреть

<tr ng-repeat="result in vm.results | valueSort">

Примечание. Я настроил фабрику, чтобы вернуть ваши values для ссылки на объекты для демонстрации

DEMO

Насколько я понимаю, этот фильтр снова получает значения с завода, так что с точки зрения эффективности, не будет ли быстрее просто сохранить значения в моих элементах в первую очередь, а затем отсортировать как обычно?
нет реальной разницы в эффективности. Фабричное соединение - это не более чем передача ссылки на объект, а пользовательский фильтр не менее эффективен, чем orderBy, который вам все равно придется использовать