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

Если у меня есть массив объектов, и я хочу связать модель 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', но я не хочу связывать модель с оценкой ; Я хочу связать его с заголовком предмета, имеющего оценку «C».

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

114 голосов | спросил Bernhard Hofmann 30 J000000Tuesday13 2013, 15:30:38

8 ответов


0
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>
ответил JB Nizet 30 J000000Tuesday13 2013, 15:50:50
0

Вы можете использовать фильтр «filter» в вашем контроллере, чтобы получить все оценки «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]
ответил Oliver 30 J000000Tuesday13 2013, 17:00:16
0

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

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

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

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
ответил lukeatdesignworks 30 PMpWed, 30 Apr 2014 15:49:23 +040049Wednesday 2014, 15:49:23
0

обратите внимание, если вы используете $ 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];

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

ответил Daniel Morris 23 MarpmThu, 23 Mar 2017 23:12:29 +03002017-03-23T23:12:29+03:0011 2017, 23:12:29
0

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

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'});
}

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

.

вы можете прочитать больше об этом здесь 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'});
ответил Kieran 19 32014vEurope/Moscow11bEurope/MoscowWed, 19 Nov 2014 03:27:07 +0300 2014, 03:27:07
0

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

 var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});
ответил Nelu 4 FebruaryEurope/MoscowbSat, 04 Feb 2017 00:50:56 +0300000000amSat, 04 Feb 2017 00:50:56 +030017 2017, 00:50:56
0

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

var sample = [1, 2, 3]

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

/* output */
[1, 3]

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

ответил Diego Venâncio 4 AMpWed, 04 Apr 2018 00:30:04 +030030Wednesday 2018, 00:30:04
0

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

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
ответил Amay Kulkarni 11 Jpm1000000pmThu, 11 Jan 2018 12:52:04 +030018 2018, 12:52:04

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132