Як я фільтрую масив з AngularJS і використовую властивість відфільтрованого об'єкта як атрибут ng-model?

Якщо у мене є масив об'єктів і я хочу прив’язати модель 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", але я не хочу прив'язувати модель до класу ; Я хочу прив’язати його до назви предмета, який має оцінку "С".

Чи можливо це, і якщо так, то як це робиться?

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

Ви можете використовувати фільтр "фільтр" у своєму контролері, щоб отримати всі оцінки "С". Отримання першого елемента масиву результатів дасть вам назву предмета, який має ступінь "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]

Ось модифікований JSBin з робочим зразком:

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

Ось що я зробив з фільтрами на вході:

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

зверніть увагу, якщо ви використовуєте $ 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];

зателефонували лише за помилку, оскільки вона втягнула в комісію ID 56, а не 6.

Додавання справжніх сил точно збігається.

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

Але все ж я віддаю перевагу цьому (я використовую машинопис, звідси "Нехай" і =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[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'});
}

Тоді ви можете посилатися на пошкоджені суб'єкти так само, як і в результатах об'єкт

більше про це можна прочитати тут https://docs.angularjs.org/guide/filter

оскільки ця відповідь під кутом оновила документацію, вони тепер рекомендують викликати фільтр

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

Ви також можете використовувати функції з $filter('filter'):

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

Якщо ви використовуєте ES6, ви можете:

var sample = [1, 2, 3]

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

/* output */
[1, 3]

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

Застосовуючи той же фільтр у HTML із кількома стовпцями, лише приклад:

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