7

以下のように定義されたユーザーオブジェクトがあります。

$scope.users = [{id: 1, name: 'Adam', friends: [{name: 'John', age: 21, sex: 'M'}, {name: 'Brad', age: 32, sex: 'M'}]}]

次に、次のコードがあります。

<div ng-repeat="user in users>
 <input type="text" ng-model="searchText">
 <div ng-repeat="friend in user.friends | filter:searchText">
  {{user.name}} {{friend.name}} {{friend.age}}
 </div>
</div>

テキストボックスに「searchText」と入力すると、フィルターにユーザーの名前と友人の名前/年齢が表示されます。誰でもこれを行う方法を手伝ってもらえますか?

私が正しければ、これ用のカスタム フィルターを作成する必要があると思いますか、それともこれを達成できる他の方法はありますか?

4

2 に答える 2

14

一度に 2 つのもの (friends 配列のいくつかのプロパティとユーザー) をフィルター処理する必要があるため、 2 つの追加パラメーターを受け入れる独自のカスタム フィルターを作成する必要があります。

myApp.filter('myFilter', function() {
  return function(friends, searchText, username) {
    var searchRegx = new RegExp(searchText, "i");
    if ((searchText == undefined) || (username.search(searchRegx) != -1)) {
        return friends;
    }
    var result = [];
    for(i = 0; i < friends.length; i++) {
        if (friends[i].name.search(searchRegx) != -1 || 
            friends[i].age.toString().search(searchText) != -1) {
            result.push(friends[i]);
        }
    }
    return result;
  }
});

次に、次のように呼び出します。

<div ng-repeat="user in users">
   <input type="text" ng-model="searchText">
   <div ng-repeat="friend in user.friends | myFilter:searchText:user.name">
      {{user.name}} {{friend.name}} {{friend.age}}
    </div>
</div>

":searchText:user.name" は、追加の引数をカスタム フィルターに渡す方法です。

フィドル。

于 2012-12-12T17:18:33.473 に答える
1

http://docs.angularjs.org/api/ng.filter:フィルター

<div ng-repeat="user in users>
 <input type="text" ng-model="search.$">
 <div ng-repeat="friend in user.friends | filter:search">
  {{user.name}} {{friend.name}} {{friend.age}}
 </div>
</div>
于 2012-12-12T08:24:31.333 に答える