AngularJS ngは、オブジェクトとテキストボックスの1つの属性でフィルタを繰り返します。

Question

私はこの問題を抱えており、最良の方法で解決する方法を知りたいと思います。テキストボックスでng-repeatの結果をフィルタリングする必要があります。ハッシュタグが最初の記号として使用されている場合、特定の1つの列に対してのみフィルタを使用する必要があります。例えば：デフォルトで

1. =のみ、検索ボックスに挿入されたテキストによってフィルタ - を意味 フィルタは、各ユーザーのすべての属性で動作するはずです。

2. ユーザーがHashtag：valueと入力すると、1つの属性でフィルタリングされます。例えば ：（代わりに、検索ボックスに、通常の値のユーザーインサートの）

   #ID: 33

   は、次の日付を持っている33

   #date: 1/12/2014

   ウィルフィルタユーザーのみが含まれているIDを持つユーザーのみをフィルタリングします

 
var users = [{ 
    "name": "Bruce", 
    "city": "Thailand", 
    "date": "1/12/2014", 
    "id": 3376848 
}, { 
    "name": "Frank", 
    "city": "Bangladesh", 
    "date": "11/10/2014", 
    "id": 4482771 
}, { 
    "name": "Judith", 
    "city": "Philippines", 
    "date": "13/9/2015", 
    "id": 4981921, 

}, { 
    "name": "Earl", 
    "city": "Ukraine", 
    "date": "21/6/2015", 
    "id": 4024523, 
}];

Answer 1

あなたがする必要があるのは、範囲内の変数を見ることです（私は以下の "検索"を使用します）。

「＃」で始まる場合は、そのプロパティでのみ検索してください。 "＃"で始まらない場合は、すべてのプロパティーを検索してください。

オリジナルの「ユーザー」配列を変更しないため、「filteredUsers」という新しい配列を作成しました。

Angularのフィルタサービスを使用しています（コントローラには$filterを含めるようにしてください）。

var app = angular.module("app", []) 
 
    .controller("controller", function($scope, $filter) { 
 

 
    var users = [{ 
 
     "name": "Bruce", 
 
     "city": "Thailand", 
 
     "date": "1/12/2014", 
 
     "id": 3376848 
 
    }, { 
 
     "name": "Frank", 
 
     "city": "Bangladesh", 
 
     "date": "11/10/2014", 
 
     "id": 4482771 
 
    }, { 
 
     "name": "Judith", 
 
     "city": "Philippines", 
 
     "date": "13/9/2015", 
 
     "id": 4981921, 
 

 
    }, { 
 
     "name": "Earl", 
 
     "city": "Ukraine", 
 
     "date": "21/6/2015", 
 
     "id": 4024523, 
 
    }]; 
 

 
    $scope.search = ""; 
 
    $scope.filteredUsers = users; 
 

 
    $scope.$watch("search", function(newVal, oldVal) { 
 

 
     // if the search value starts with '#' 
 
     if (newVal.substring(0, 1) === "#") { 
 
     var searchProperty = newVal.substring(1, newVal.indexOf(":")); // string between '#' and first ':' 
 
     var searchValue = $scope.search.substring(newVal.indexOf(":") + 1).trim(); // string after first ':'. will chuck some errors if there is no ':' but you can check this yourself 
 

 
     // if there is both a property and value do the search on a single property 
 
     if (searchProperty && searchValue) { 
 
      // Angular's filter service requires an object (e.g. {name: "Bruce"}) but if we try {searchProperty: searchValue} it will filter on a property called "searchProperty" not the value of the variable so we create a new object and use that 
 
      var searchObject = {}; 
 
      searchObject[searchProperty] = searchValue; 
 
      
 
      $scope.filteredUsers = $filter('filter')(users, searchObject, false); 
 
     } else { 
 
      // Else show no users. It's up to you what you do here. You might want to show all users while the user is typing 
 
      $scope.filteredUsers = []; 
 
     } 
 
     } else { 
 
     // if the search value doesn't start with '#', use filter on the search value will look through all properties 
 
     $scope.filteredUsers = $filter('filter')(users, newVal, false); 
 
     } 
 

 
    }); 
 

 
    });

pre { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="controller"> 
 

 
    Search: 
 
    <input type="text" ng-model="search" /> 
 

 

 
    <h4>User</h4> 
 
    <pre ng-repeat="user in filteredUsers"> 
 

 
    {{user | json}} 
 

 
    </pre> 
 

 
</div>