【问题标题】:How to do ng-repeat with filter using angularjs?如何使用 angularjs 使用过滤器进行 ng-repeat?
【发布时间】:2025-12-03 17:05:01
【问题描述】:

在这里我添加了我想根据用户输入搜索的代码我尝试了这个但是

filter: first_name_model

我没有得到正确的结果

例如:运行代码片段

输入“2”并查看结果(我们只需要获取一条记录,但它显示所有记录)

输入“as”并查看结果(我们只需要获取一条记录(asif yohana),但它显示了两条记录)

我只想过滤这两个字段

1.没有

2.显示名称

可能需要使用'OR'条件。

帮助我前进

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>

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    请将输入的 ng-model 更改为 first_name_model.no 它对我有用

     <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>
    

    【讨论】:

    • 输入“as”查看结果它没有给出记录。它应该给出“asif yohana”记录权
    • 我们需要像这样使用 'OR' 条件(没有 ||DisplayName)
    【解决方案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>

    【讨论】: