Question

我有用户列表，也有下拉列表并筛选用户。当页面加载SearchData为空时，ng-repeat将显示所有数据。当用户输入subjectn时，我们需要过滤用户数据我该怎么做

在下面我添加了代码，对此有一些帮助。

var myApp = angular.module('sandbox', ['ngMaterial']);



myApp.controller('myCtrl', function($scope) {

   

    $scope.subjects = [{
            "name": "tamil",
            "value": "TAM"
        },

        {
            "name": "english",
            "value": "ENG"
        },

        {
            "name": "science",
            "value": "SCI"
        }
    ]

    $scope.sclass = ['a', 'b', 'c', 'd']



});

<div ng-app="sandbox">
   <div layout-gt-sm="row" layout="column" layout-margin>
      <main flex-md="60" flex-order-gt-sm="2">
         <div style="width:30%;" ng-controller="myCtrl">
		  >
            <div ng-repeat="user in users">
               {{user.id}}{{user.userclass}}{{user.name}}
            </div>
         </div>
      </main>
   </div>
</div>

Answer 1

快速的ES6通用方式（仅发布主要的过滤器功能）

$scope.filterusers = function() {

  if (!$scope.filterData) return; // you don't init the filterData to {} so this will short when you press filter without touching anything

  var filterId = $scope.filterData.id
  var filterSubjects = $scope.filterData.subject;
  var filterClasses = $scope.filterData.class;

  $scope.filteredUsers = filterId ? $scope.users.filter(user => user.id == filterId) : $scope.users; // not === since you input string, you can solve this by making unput type number
  $scope.filteredUsers = filterSubjects && filterSubjects.length > 0 ? $scope.filteredUsers.filter(user => filterSubjects.includes(user.subject)) : $scope.filteredUsers;
  $scope.filteredUsers = filterClasses && filterClasses.length > 0 ? $scope.filteredUsers.filter(user => filterClasses.includes(user.userclass))  : $scope.filteredUsers;

 console.log($scope.filteredUsers)
}

初始化控制器时，您可以设置：

$scope.filteredUsers = $scope.users;

要确保您显示了未过滤的列表：

您现在可以绑定$scope.filteredUsers而不是$scope.users来查看

您保留$scope.users，因此始终可以从:)过滤所有数据

简而言之，我已应用级联过滤器：如果设置了某个filterData属性，则按该属性进行过滤，如果没有，则返回先前的过滤条件。通过这种方式，您可以应用更多过滤器，并且始终可以按1过滤1个属性，这样一来，在某些过滤器中未设置任何内容时，它会更易于阅读和跳过过滤。

如果您想使用AngularJS的完整方法，则应使用此处描述的方法（我不喜欢它，因为它的代码更多，并且对其工作方式更加晦涩）：

AngularJS filter

编辑：我根据您的命名做出了一些假设-如果subject应该是subjects（如果可能是多个），这是一个更新的答案和有效的小提琴：

fiddlejs

Answer 2

如果您对更通用的方式感兴趣，则应查看我对以下问题的回答：link

如何根据用户输入在数组中进行隔离？

2 个答案: