129

オブジェクトの配列があり、フィルターに基づいて要素の 1 つのプロパティに 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」のサブジェクトへの 2 番目の入力をフィルター処理したいのですが、モデルをグレードにバインドしたくありません。グレード「C」の科目のタイトルにバインドしたい。

これは可能ですか?可能であれば、どのように行われますか?

4

8 に答える 8

161

コントローラーで「フィルター」フィルターを使用して、すべての「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]
于 2013-07-30T13:00:16.957 に答える
63

これは、実際のサンプルを含む変更された JSBin です。

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

入力でフィルターを使用して行ったことは次のとおりです。

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
于 2014-04-30T11:49:23.313 に答える
16

$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 が 6 ではなく 56 であったため、バグのために呼び出されるだけです。

true を追加すると、完全一致が強制されます。

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

それでも、私はこれを好みます (typescript を使用するため、"Let" と => を使用します):

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

私がそうするのは、将来のある時点で、そのフィルタリングされたデータなどからさらに情報を取得したいかもしれないからです...そこに関数を入れると、フードが開いたままになります。

于 2017-03-23T20:12:29.000 に答える
13

コントローラーで結果の別のリストを作成したい場合は、フィルターを適用できます

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

this answer angular がドキュメントを更新したため、フィルターを呼び出すことをお勧めします

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
于 2014-11-19T00:27:07.647 に答える