如何使用angularjs使用过滤器进行ng-repeat？

Question

Here I added my code i want to search based on user input i tried this but

filter: first_name_model

i am not getting proper result

for example : Run code Snippet

enter "2" and see the result (we need to get only one record but it showing all records )

enter "as" and see the result (we need to get only one record(asif yohana) but it showing 2 records )

i want to filter only these two fields

1.no

2.DisplayName

may be need to use 'OR' condition .

help me out to move forward

 angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.students = [{ "firstname": "irfan", "lastname": "k", "no":"2", "userid": "5706b916bb729ecc876192d2" }, { "firstname": "asif", "lastname": "Y", "no":"3", "userid": "5706b916bb729ecc87619245" }, { "firstname": "arun", "lastname": "D", "no":"6", "userid": "5706b916bb729ecd876452d2" }, { "firstname": "smart", "lastname": "k", "no":"5", "userid": "5706b916bb729ecc876452d2" }, { "firstname": "rajesh", "lastname": "v", "no":"4", "userid": "5706b916bb729ecc87619245" } ]; $scope.users = [{ "_id": "5706b916bb729ecc87619245", "DisplayName": "irfan kadhar", }, { "_id": "5706b916bb729ecc876192d2", "DisplayName": "asif yohana", }, { "_id": "5706b916bb729ecc876452d2", "DisplayName": "smar kiran", }, { "_id": "5706b916bb729ecd876452d2", "DisplayName": "arun dinesh ", } ] if ($scope.students) { for (var i = 0; i < $scope.students.length; i++) { for (var j = 0; j < $scope.users.length; j++) { if ($scope.students[i].userid == $scope.users[j]._id) { $scope.students[i].AssignedToDisplayName = $scope.users[j].DisplayName; } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="namesCtrl"> filter data <input type = "text" ng-model = "first_name_model"/><br><br><br> <table> <tr> <th>Number</th> <th>DisplayName</th> </tr> <tr ng-repeat="student in students | filter: first_name_model"> <td><input type="text" ng-model ="student.no"></td> <td> <select ng-model="student.userid" placeholder="userid" name="userid{{$index}}"> <option ng-repeat="user in users | orderBy: 'DisplayName'" ng-value="user._id">{{user.DisplayName}}</option> </select> </td> </tr> </table> </div> 

Answer 1

Please change ng-model of input to first_name_model.no It works form me

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
         filter data <input type = "text" ng-model = "first_name_model.no"/><br><br><br>
         <table>
            <tr>
               <th>Number</th>
               <th>DisplayName</th>
            </tr>

            <tr ng-repeat="student in students | filter: first_name_model">
               <td><input type="text" ng-model ="student.no"></td>

               <td>
                  <select  ng-model="student.userid"  placeholder="Assigned To" name="userid{{$index}}" >
                  <option ng-repeat="user in users | orderBy: 'DisplayName'" ng-value="user._id">
                     {{user.DisplayName}}</md-option>
                     </md-select>
               </td>
            </tr>
         </table>
      </div>

Answer 2

  angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.search = function(item) { if (!$scope.query || (item.no.toLowerCase().indexOf($scope.query) != -1) || (item.AssignedToDisplayName.toLowerCase().indexOf($scope.query) != -1) ){ return true; } return false; }; $scope.students = [{ "firstname": "irfan", "lastname": "k", "no":"2", "userid": "5706b916bb729ecc876192d2" }, { "firstname": "asif", "lastname": "Y", "no":"3", "userid": "5706b916bb729ecc87619245" }, { "firstname": "arun", "lastname": "D", "no":"6", "userid": "5706b916bb729ecd876452d2" }, { "firstname": "smart", "lastname": "k", "no":"5", "userid": "5706b916bb729ecc876452d2" }, { "firstname": "rajesh", "lastname": "v", "no":"4", "userid": "5706b916bb729ecc87619245" } ]; $scope.users = [{ "_id": "5706b916bb729ecc87619245", "DisplayName": "irfan kadhar", }, { "_id": "5706b916bb729ecc876192d2", "DisplayName": "asif yohana", }, { "_id": "5706b916bb729ecc876452d2", "DisplayName": "smar kiran", }, { "_id": "5706b916bb729ecd876452d2", "DisplayName": "arun dinesh ", } ] if ($scope.students) { for (var i = 0; i < $scope.students.length; i++) { for (var j = 0; j < $scope.users.length; j++) { if ($scope.students[i].userid == $scope.users[j]._id) { $scope.students[i].AssignedToDisplayName = $scope.users[j].DisplayName; } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="namesCtrl"> filter data <input type = "text" ng-model = "query"/><br><br><br> <table> <tr> <th>Number</th> <th>DisplayName</th> </tr> <tr ng-repeat="student in students | filter:search"> <td><input type="text" ng-model ="student.no"></td> <td> <select ng-model="student.userid" placeholder="Assigned To" name="userid{{$index}}"> <option ng-repeat="user in users | orderBy: 'DisplayName'" ng-value="user._id">{{user.DisplayName}}</option> </select> </td> </tr> </table> </div>