Cách lọc danh sách bằng angularjs

Question

Tôi có một loạt đối tượng ban đầu khi tải không có bộ lọc nào nên áp dụng khi đó danh sách kết hợp lựa chọn người dùng sẽ được hiển thị tương ứng.

Fiddle

Tôi không thể có được những gì sai tôi đã làm ở đây toàn bộ danh sách tôi không hiển thị và chỉ có lựa chọn duy nhất hoạt động tại một thời điểm. Đối với lựa chọn duy nhất tôi đã sử dụng

return $scope.filter[stat.userStatus] || noFilter($scope.filter); 

Tôi không thể thực hiện cả hai lựa chọn.

Answer 1

Bộ lọc có thể được chained together, như vậy:

<div ng-repeat="item in mylist | filter:filterByStatus | filter:filterByRole"> 

Các bộ lọc chạy từ trái sang phải, với mỗi một bộ lọc thông qua các mảng lọc để lọc tiếp theo.

Đây là một ngã ba của Mark's fiddle, thể hiện kỹ thuật này: http://jsfiddle.net/2671uggu/

Answer 2

Vui lòng sử dụng việc đặt tên CÙNG và trường hợp ở khắp mọi nơi trong mã của bạn

• admin là không giống như administrator
• admin là không giống như Admin

Nếu tôi hiểu đúng , Ý tưởng cơ bản sau,

$scope.filterByCategory = function (stat) { 
     //check if user has a status matching checkbox select 
     var by_status = $scope.filter[stat.userStatus]; 
     //check if user has a role that matching dropdown list select 
     var by_roles = stat.roles.indexOf($scope.filter.selectedSearch) !== -1; 

     return by_status || by_roles; //statisfy either of two will return true; 
    }; 

Full demo: http://jsfiddle.net/6rqL6zxh/

Answer 3

tôi đã có thể để có được mã của bạn làm việc. Đây là một loại sửa chữa và một cách tiếp cận tốt hơn sẽ làm cho một bộ lọc (làm việc trên đó là tốt). Giả định rằng tôi đã thực hiện: -

By lọc Member Status có nghĩa là kiểm tra 'userStatus'

By lọc Trạng thái ADMIN nghĩa kiểm tra 'vai trò'

Check-out này Plnkr

tôi đang lọc dựa trên một đối tượng cập nhật dựa trên $ scope.filter.

Thay đổi sang HTML

<div ng-repeat="item in mylist | filter:filterModel"> 

Changes để JS

$scope.filterModel = 
     { 
      "userStatus":"", 
      "roles" : "" 
     } 
    $scope.$watch('filter', function() { 
     var myModel = 
     { 
      "userStatus":"", 
      "roles" : "" 
     } 
     if($scope.filter.administrator && $scope.filter.lead) 
     {  
      myModel.userStatus=""; 
     } 
     else if($scope.filter.administrator) 
     { 
      myModel.userStatus="admin";     
     } 
     else if($scope.filter.lead) 
     { 
      myModel.userStatus="lead"; 
     } 
     else 
     { 
      myModel.userStatus=""; 
     } 
     if(angular.equals($scope.filter.selectedSearch,'Default')) 
     { 
      myModel.roles=""; 
     } 
     else 
     { 
      myModel.roles=$scope.filter.selectedSearch; 
     } 
     $scope.filterModel=myModel; 
    },true); 

CẬP NHẬT: lọc Mark dường như được làm việc một cách chính xác