AngularJS ng通过对象和文本框中的一个属性重复过滤

Question

I have this issue and I would like to get ideas on how to solve it in the best approach. I need to filter ng-repeat results with a text box and when hashtag is being used as the first sign I need the filter to work only on one specific column. for example:

1. by default = filter only by text inserted in the search box - meaning the filter should work on all attributes of each user.

2. Filter by only one attribute when user enter Hashtag: value. For instance: (instead of regular value user insert in search box)

    #ID: 33  

   will filter only users who have id which contains 33.

    #date: 1/12/2014  

   wil filter only users who have the following date

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

What you need to do is watch a variable in scope (I use "search" below).

When it starts with "#", search only on that property. When it doesn't start with "#", search on all properties.

I've created a new array called "filteredUsers" because we don't want to modify the original "users" array.

To make things easier, we're using Angular's filter service (remember to include $filter in your controller).

 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 (eg {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>