AngularJSで配列をフィルタリングし、フィルタリングされたオブジェクトのプロパティをng-model属性として使用するにはどうすればよいですか？

121

オブジェクトの配列があり、フィルターに基づいて要素の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」の科目のタイトルにバインドします。

これは可能ですか？可能な場合、どのように行われますか？

angularjs

— ベルンハルト・ホフマン
ソース

127

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

— JBニゼット
ソース

1

どこへ行くのかわかりますが、リピーターは欲しくありませんでした。実際にフィルタリングするプロパティはID列であるため、一意です。しかし、これが一般的な問題を解決するための正しい方法であることがわかります。

— Bernhard Hofmann 2013

1

これはイタリア人:)のためのチュートリアルですdev.stasbranger.com/post/77190983049/...

— シルビオ・トロイア

10

これは非常に有用だった、と逆（C以外のすべてのもの）のために、これは動作します：filter:{grade:'!'+'C'}

— pulkitsinghal

2

あなたは同じことをすることができますgrade arrayか？私の場合、ツリービューから成績配列を作成し、配列の結果をフィルター処理したいと思います。

— ファンカルロスオロペサ2016年

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]

— オリバー
ソース

すみません、その2番目のフィルター（「フィルター」）をフォローしていません。もう1つ説明してください。

— Winnemucca

1

@stevekそれがフィルターの名前です。filter（）メソッドはフィルターを提供します。配列をフィルターするので、フィルターはフィルターと呼ばれます。通貨フィルターを使用すると、次のようになります。$ filter（ 'currency'）（amount、symbol、fractionSize）次のドキュメントを確認してください：docs.angularjs.org/api/ng/filter

— Oliver

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];

6ではなく手数料ID 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];

私がそうしているのは、将来のある時点で、フィルターされたデータなどからいくつかの詳細情報を取得したい場合があるからです...そこに関数があると、フードが開いたままになります。

— ダニエルモリス
ソース

私はあなたと同じエラーが発生しました。3番目のブールパラメータのヒントに感謝します。気づかなかった。

— Georg Leber 2017

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をご覧ください。

このアンサー角度がドキュメントを更新したので、今フィルターを呼び出すことをお勧め

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

— キーラン
ソース

filterFilterとは何ですか？それは何かサービスや指令ですか？filterFilterのコードはどこにありますか？

— Mou

それは角張ったサービスです。上記のリンクの最初の例をご覧ください。（scripts.jsファイル内）

— Kieran

彼らは文書filterFilterを変更したものの、まだ..動作します

— キーラン

4

あなたはできるも使う機能をと$filter('filter')：

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

— ネルー
ソース

4

ES6を使用している場合、次のことができます。

var sample = [1, 2, 3]

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

/* output */
[1, 3]

また、フィルターは既存の配列を更新せず、毎回新しいフィルターされた配列を返します。

— ディエゴベナンシオ
ソース

0

複数の列を含むHTMLに同じフィルターを適用します。例：

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

— アメイ・クルカルニ
ソース