Как мне отфильтровать массив с помощью AngularJS и использовать свойство отфильтрованного объекта в качестве атрибута ng-model?

122

Если у меня есть массив объектов, и я хочу привязать модель Angular к свойству одного из элементов на основе фильтра, как мне это сделать? Я могу лучше объяснить на конкретном примере:

HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

контроллер:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin: http://jsbin.com/adisax/1/edit

Я хочу , чтобы фильтровать второй вход к предмету с класса «C», но я не хочу , чтобы связать модель в классе ; Я хочу привязать его к названию предмета с оценкой «С».

Возможно ли это, и если да, то как это делается?

angularjs

— Бернхард Хофманн
источник

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— JB Nizet
источник

1

Я понимаю, к чему вы клоните, но мне действительно не нужен репитер. Свойство, по которому я буду фильтровать, - это столбец идентификаторов, поэтому он уникален. Но я вижу, что это был бы правильный способ решения общей проблемы.

— Bernhard Hofmann

1

это учебник для итальянцев

— Сильвио Троя

10

это было очень полезно, и для инверсии (все, кроме C) это сработает:filter:{grade:'!'+'C'}

— pulkitsinghal

2

Можете ли вы сделать то же самое с a grade array? В моем случае я строю свой массив оценок из древовидной структуры и хочу отфильтровать результат для тех, кто находится в массиве.

— Хуан Карлос Оропеза,

157

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

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

То же и с простым ES6:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

— Оливер
источник

Извините, я не следую этому второму фильтру («фильтру»), вы можете объяснить его немного подробнее?

— Winnemucca

1

@stevek Это название фильтра. Метод filter () дает вам фильтр. Просто фильтр называется фильтром, потому что он фильтрует массив. С фильтром валюты это выглядело бы так: $ filter ('currency') (amount, symbol, FractionSize) Проверьте документы здесь: docs.angularjs.org/api/ng/filter

— Оливер,

61

Вот модифицированный JSBin с рабочим образцом:

http://jsbin.com/sezamuja/1/edit

Вот что я сделал с фильтрами на входе:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
источник

1

Это реальная сделка. Это сила. Это способ. Я пошел с этим и теперь счастлив.

— user1576978

13

обратите внимание, если вы используете $ filter следующим образом:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

и у вас случайно была другая оценка, о, я не знаю, CC, AC, C + или CCC, она их привлекает. вам нужно добавить требование для точного соответствия:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

Это действительно убило меня, когда я вытащил некоторые детали комиссии вроде этого:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

вызвали только за ошибку, потому что она вытаскивала идентификатор комиссии 56, а не 6.

Добавление истинных сил точного совпадения.

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

Тем не менее, я предпочитаю это (я использую машинописный текст, отсюда «Let» и =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

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

— Дэниел Моррис
источник

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

— Георг Лебер,

12

если вы хотите создать отдельный список результатов в контроллере, вы можете применить фильтр

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

Затем вы можете ссылаться на failedSubjects так же, как и на объект результатов.

вы можете прочитать об этом здесь https://docs.angularjs.org/guide/filter

поскольку этот ответ angular обновил документацию, теперь они рекомендуют вызывать фильтр

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— Киран
источник

что такое filterFilter? это какая-то услуга или директива? где код для filterFilter?

— Mou

это угловой сервис. Взгляните на первый пример по ссылке выше. (в файле scripts.js)

— Киран

хотя они изменили документацию filter Filter все еще работает ..

— Киран

5

Если вы используете ES6, вы можете:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

Также обратите внимание, что фильтр не обновляет существующий массив, он будет каждый раз возвращать новый фильтрованный массив.

— Диего Венансио
источник

4

Вы также можете использовать функции с $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Нелу
источник

0

Применение того же фильтра в HTML с несколькими столбцами, просто пример:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— Амай Кулкарни
источник