Angularでは、配列内のオブジェクトを検索する必要があります


114

Angularでは、たくさんのオブジェクトを返すオブジェクトをスコープ内に持っています。それぞれにIDがあります(これはフラットファイルに保存されているため、DBがありません。ユーザーが使用できないようですng-resource)。

私のコントローラーでは:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

私の見解では、デフォルトでng-showmoreで非表示になっている魚に関する追加情報がありますが、単純なshow moreタブをクリックすると、関数を呼び出しますshowdetails(fish.fish_id)。私の関数は次のようになります:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

ビューに詳細が表示されます。ただし、ドキュメントを検索した後、そのfish配列を検索する方法がわかりません。

それでは、配列をクエリするにはどうすればよいですか?そして、コンソールでどのようにしてデバッガを呼び出して、$scopeオブジェクトを操作できるようにしますか?

回答:


95

それがあなたを少し助けることができるかどうか私は知っています。

これは私があなたのためにシミュレートしようとしたものです。

jsFiddleをチェックアウトしてください;)

http://jsfiddle.net/migontech/gbW8Z/5/

「ng-repeat」でも使用できるフィルターを作成しました

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

コントローラーでの使用:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

質問があれば教えてください。


私はangularとjavascriptが初めてなので、「if(+ input [i] .id == + id){」ステートメントで「+」の意味を理解できません。あなたの考えを共有してください。
Harshavardhan

完璧なソリューション!!
Anil Kumar Ram

1
「+ input [i] .id == + id」は、数値を比較していると思います。したがって、$ filterに1または '1'を渡すと、まったく同じように動作します。私は英数字のIDを使用しているので、「input [i] .id === id」に変更しました
Axel Zehden

211

既存の$ filterサービスを使用できます。上記のフィドルを更新しましたhttp://jsfiddle.net/gbW8Z/12/

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

Angularのドキュメントはこちらhttp://docs.angularjs.org/api/ng.filter:filter


2
非常に役立つ-私が角度を学ぶにつれて、jQuery関数を最初に考えるのをやめる必要があることに気づきました(これを行うために$ .grepを取得しようとしていました)-この$ filterサービスを使用することは私が必要とするものだけでした!
Bobby

2
それはあなた自身のフィルターを書くことを含まないのでより良い答えです。
stevenw00

$scope.selected/が何であるか詳細を追加していただけませんか。選択したiが見つかりましたng-selected/ ngSelected:で クイック検索を実行しますIf the expression is truthy, then special attribute "selected" will be set on the element。これは同じですか?あなたの例ではそれは何をしますか?ありがとう
surfmuggle 2015

1
驚くばかり !。シンプルにします。ありがとう
Bharath

2
$ filterサービスをコントローラーに追加することを忘れないでください。すなわち:app.controller( 'mainController'、['$ filter'、function($ filter){// $ filter is now used。}]);
Lucas Reppe Welander 2016年

22

@migontechの回答と彼のアドレスに「おそらくもっと一般的にする」という彼のコメントを追加するには、ここにその方法があります。以下では、任意のプロパティで検索できます。

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

その後、filterの呼び出しは次のようになります。

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

注:文字列ベースの一致を可能にするために、単項演算子(+)を削除しました...


ドキュメントがこれがng-initの唯一のユースケースであると述べていることを考慮すると、これは間違いなくそれを行うAngularの方法であると私は言うでしょう。
bluehallu 14

非常に理解しやすい例で非常に役立つ
Rainabba

13

汚くて簡単な解決策は次のようになります

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

5
なぜこれは汚い解決策なのですか?
Trialcoder


6
他の言語ではさらに多くのレコードがあるでしょう。つまり、C ++にはたくさんの魚がいます。(ああ黙れ..私は行って自分で投票する.. !!)
Mike Gledhill

7

Angularjsには、これを行うためのフィルターオプションがすでにあります、https: //docs.angularjs.org/api/ng/filter/filter


7

あなたのソリューションは正しいですが、不必要に複雑です。純粋なJavaScriptフィルター関数を使用できます。これはあなたのモデルです:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

そして、これはあなたの機能です:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

式を使用することもできます:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

この機能の詳細:LINK


4

このスレッドを見たが、自分の検索に一致しないIDを検索したかった。それを行うコード:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

これでうまくいきました。シンプルで滑らか、テストが簡単。ありがとう!
Kalpesh Panchal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.