How to do ng-repeat with filter using angularjs?

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>

Ashutosh · Accepted Answer · 2018-06-28 13:09:41Z

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>

answered Jun 28, 2018 at 13:09

Ashutosh

1383 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

its me Over a year ago

type "as" see the result its not giving records .it should give "asif yohana" record right

its me Over a year ago

we need to use 'OR' condtion like this (no ||DisplayName)

its me · Accepted Answer · 2018-06-29 01:56:25Z

    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>

Collectives™ on Stack Overflow

How to do ng-repeat with filter using angularjs?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related