Làm thế nào để lọc (khóa, giá trị) với ng-lặp trong AngularJs?

Question

Tôi cố gắng để làm một cái gì đó như:

<div ng-controller="TestCtrl"> 
    <div ng-repeat="(k,v) in items | filter:hasSecurityId"> 
     {{k}} {{v.pos}} 
    </div> 
</div> 

AngularJs Phần:

function TestCtrl($scope) 
{ 
    $scope.items = { 
        'A2F0C7':{'secId':'12345', 'pos':'a20'}, 
        'C8B3D1':{'pos':'b10'} 
        }; 

    $scope.hasSecurityId = function(k,v) 
    { 
     return v.hasOwnProperty('secId'); 
    } 
} 

Nhưng bằng cách nào đó, nó được hiển thị cho tôi tất cả các mục. Làm cách nào tôi có thể lọc (khóa, giá trị)?

Answer 1

góc filters chỉ có thể được áp dụng cho các mảng và không đối tượng, từ API góc của - "Chọn một tập hợp con của các mục từ mảng và trả về nó như là một mảng mới"

Bạn có hai lựa chọn ở đây:
1) di chuyển $scope.items để một mảng hoặc -
2) trước bộ lọc ng-repeat mặt hàng, như thế này:

<div ng-repeat="(k,v) in filterSecId(items)"> 
    {{k}} {{v.pos}} 
</div> 

Và trên Controller:

$scope.filterSecId = function(items) { 
    var result = {}; 
    angular.forEach(items, function(value, key) { 
     if (!value.hasOwnProperty('secId')) { 
      result[key] = value; 
     } 
    }); 
    return result; 
} 

jsfiddle: http://jsfiddle.net/bmleite/WA2BE/

Answer 2

Giải pháp của tôi sẽ là tạo bộ lọc tùy chỉnh và sử dụng nó:

app.filter('with', function() { 
    return function(items, field) { 
     var result = {}; 
     angular.forEach(items, function(value, key) { 
      if (!value.hasOwnProperty(field)) { 
       result[key] = value; 
      } 
     }); 
     return result; 
    }; 
}); 

Và trong html:

<div ng-repeat="(k,v) in items | with:'secId'"> 
     {{k}} {{v.pos}} 
</div> 

Answer 3

Hoặc đơn giản là sử dụng

ng-show="v.hasOwnProperty('secId')" 

Xem giải pháp cập nhật tại đây:

http://jsfiddle.net/RFontana/WA2BE/93/

Answer 4

Bạn chỉ cần sử dụng mô-đun angular.filter và sau đó bạn có thể lọc ngay cả theo thuộc tính lồng nhau.
xem: jsbin
2 Ví dụ:

JS:

angular.module('app', ['angular.filter']) 
    .controller('MainCtrl', function($scope) { 
    //your example data 
    $scope.items = { 
    'A2F0C7':{ secId:'12345', pos:'a20' }, 
    'C8B3D1':{ pos:'b10' } 
    }; 
    //more advantage example 
    $scope.nestedItems = { 
    'A2F0C7':{ 
     details: { secId:'12345', pos:'a20' } 
    }, 
    'C8B3D1':{ 
     details: { pos:'a20' } 
    }, 
    'F5B3R1': { secId:'12345', pos:'a20' } 
    }; 
}); 

HTML:

<b>Example1:</b> 
    <p ng-repeat="item in items | toArray: true | pick: 'secId'"> 
    {{ item.$key }}, {{ item }} 
    </p> 

    <b>Example2:</b> 
    <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' "> 
    {{ item.$key }}, {{ item }} 
    </p> 

Answer 5

Ngoài ra bạn có thể sử dụng ng-repeat với ng-if:

<div ng-repeat="(key, value) in order" ng-if="value > 0"> 

Answer 6

Nó là loại muộn, nhưng tôi nhìn cho e bộ lọc tương tự và kết thúc bằng một cái gì đó như thế này:

<div ng-controller="TestCtrl"> 
<div ng-repeat="(k,v) in items | filter:{secId: '!!'}"> 
    {{k}} {{v.pos}} 
</div> 
</div> 

Answer 7

tôi đã hơn chút của một bộ lọc chung mà tôi đã sử dụng trong nhiều dự án đã:

• đối tượng = đối tượng mà cần phải được lọc
• lĩnh vực = lĩnh vực trong phạm vi đối tượng mà chúng ta sẽ lọc trên
• lọc = giá trị của bộ lọc mà cần phải phù hợp với lĩnh vực này

HTML:

<input ng-model="customerNameFilter" /> 
<div ng-repeat="(key, value) in filter(customers, 'customerName', customerNameFilter" > 
    <p>Number: {{value.customerNo}}</p> 
    <p>Name: {{value.customerName}}</p> 
</div> 

JS:

$scope.filter = function(object, field, filter) { 
    if (!object) return {}; 
    if (!filter) return object; 

    var filteredObject = {}; 
    Object.keys(object).forEach(function(key) { 
     if (object[key][field] === filter) { 
     filteredObject[key] = object[key]; 
     } 
    }); 

    return filteredObject; 
    }; 

Answer 8

Mặc dù câu hỏi này là khá cũ , Tôi muốn chia sẻ giải pháp của mình cho các nhà phát triển góc 1. Vấn đề là chỉ cần tái sử dụng bộ lọc góc ban đầu, nhưng minh bạch truyền bất kỳ đối tượng nào thành một mảng.

app.filter('objectFilter', function ($filter) { 
    return function (items, searchToken) { 
     // use the original input 
     var subject = items; 

     if (typeof(items) == 'object' && !Array.isArray(items)) { 
      // or use a wrapper array, if we have an object 
      subject = []; 

      for (var i in items) { 
       subject.push(items[i]); 
      } 
     } 

     // finally, apply the original angular filter 
     return $filter('filter')(subject, searchToken); 
    } 
}); 

sử dụng nó như thế này:

<div> 
    <input ng-model="search" /> 
</div> 
<div ng-repeat="item in test | objectFilter : search"> 
    {{item | json}} 
</div> 

đây là một plunker