góc ng-lặp lại bỏ qua một mục nếu nó khớp với biểu thức


91

Tôi đang tìm một cách để nói về cơ bản là bỏ qua một mục trong ng-repeat nếu nó khớp với một biểu thức, về cơ bản continue;

Trong bộ điều khiển:

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

Bây giờ trong mẫu của tôi, tôi muốn cho mọi người thấy điều đó không phù hợp name_key='FirstPerson'. Tôi nhận ra rằng nó phải có bộ lọc nên tôi đã thiết lập một Plunkr để chơi với nó nhưng không gặp may. Plunkr cố gắng


Tôi cố gắng hiểu: bạn có muốn hiển thị tất cả các mục nhưng chỉ ra ai phù hợp và ai không? hay chỉ lọc?
Maxim Shoustin

Câu trả lời:


144

Như @Maxim Shoustin đã đề xuất, cách tốt nhất để đạt được những gì bạn muốn là sử dụng bộ lọc tùy chỉnh.
Nhưng có những cách khác, một trong số đó là sử dụng ng-ifchỉ thị trên cùng một phần tử khi bạn đặt ng-repeatchỉ thị (ngoài ra, đây là plunker ):

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

Điều này có thể gây ra một nhược điểm nhỏ từ góc độ este, nhưng có một lợi thế lớn là bộ lọc của bạn có thể dựa trên quy tắc không được kết hợp chặt chẽ với playersmảng và có thể dễ dàng truy cập dữ liệu khác trong phạm vi ứng dụng của bạn:

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

Cập nhật
Như đã nêu, đây là một trong những giải pháp cho loại vấn đề này và có thể phù hợp với nhu cầu của bạn hoặc không.
Như đã chỉ ra trong các nhận xét, ng-iflà một chỉ thị, điều này thực sự có nghĩa là nó có thể thực hiện nhiều việc trong nền hơn bạn có thể mong đợi.
Ví dụ: ng-if tạo một phạm vi mới từ phạm vi chính của nó :

Phạm vi được tạo trong ngIf kế thừa từ phạm vi cha của nó bằng cách sử dụng kế thừa nguyên mẫu.

Điều này thường không ảnh hưởng đến hành vi bình thường nhưng để đề phòng những trường hợp không mong muốn, bạn nên ghi nhớ điều này trước khi thực hiện.


đây chính xác là những gì tôi đang tìm kiếm, biết rằng phải có một số cách ngắn gọn và thú vị để làm điều đó mà không có bộ lọc tùy chỉnh. Cảm ơn!
aron.duby

Lưu ý: có một số hành vi phạm vi của ng-if có thể phức tạp. Tôi đã thử phương pháp này và nó gây ra sự cố ở những nơi khác. Cụ thể, tôi có một chỉ thị "watcher" phát một sự kiện khi bộ lặp kết thúc. Sau khi thêm ng-if vào bộ lặp này, nó không còn kích hoạt sự kiện đó nữa. Bộ lọc tùy chỉnh thực sự có thể là cách sạch sẽ nhất.
claywhipkey

@claywhipkey, bạn nói đúng, cách tốt nhất là sử dụng bộ lọc, nhưng cách đó không phù hợp với mọi trường hợp. Dù sao, thx cho nhận xét và bạn có thể thấy rằng tôi đã thêm một người đứng đầu lên cập nhật trong câu trả lời chỉ để làm cho nhận thức được ý nghĩa của việc sử dụng một chỉ thị để lọc dữ liệu bất cứ ai.
gion_13

43

Tôi biết đây là một giải pháp cũ, nhưng trong trường hợp ai đó sẽ tìm kiếm một giải pháp khả thi khác, đây là một cách khác để giải quyết vấn đề này - sử dụng chức năng bộ lọc tiêu chuẩn :

Đối tượng: Một đối tượng mẫu có thể được sử dụng để lọc các thuộc tính cụ thể trên các đối tượng được chứa trong mảng. Ví dụ, vị từ {name: "M", phone: "1"} sẽ trả về một mảng các mục có tên thuộc tính chứa "M" và điện thoại thuộc tính chứa "1". ... Vị từ có thể được phủ định bằng cách thêm tiền tố vào chuỗi với!. Ví dụ, vị từ {name: "! M"} sẽ trả về một mảng các mục có tên thuộc tính không chứa "M".

Vì vậy, đối với ví dụ TS, điều gì đó như thế này nên làm:

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

Không cần viết bộ lọc tùy chỉnh, không cần sử dụng ng-ifvới phạm vi mới của nó.


Đơn giản đến mức. Không có bộ lọc tùy chỉnh hoặc phạm vi mới được tạo như tác giả đã nêu. Hoàn hảo để bỏ qua một giá trị duy nhất trong danh sách.
mbokil

Tôi nghĩ bạn cần phải loại bỏ 'player' khỏi 'player.name_key' - vì vậy nó sẽ chỉ là "{name_key: '! FirstPerson'}" trong ví dụ trên.
smithml

Tôi không bao giờ có thể khiến Angular chơi tốt với các phím trống. Có một số loại thủ thuật để sử dụng các bộ lọc tích hợp tương đương với player in players | filter: { name_key: '' }? Chỉ thị cụ thể đó sẽ không chỉ khớp với những người chơi không có / trống name_key. Phép nghịch đảo, name_key: '!'nhằm chọn bất kỳ người chơi nào không trống name_keycũng sẽ không hoạt động.
Eric L.

Bạn có thể kiểm tra câu trả lời này .
Ilya Luzyanin

4
Hãy coi chừng rằng điều này chỉ làm việc với mảng, không có đặc tính đối tượng trong một trường hợp nhưng-repeat="(key, val) in player"
David Diez

19

Bạn có thể sử dụng bộ lọc tùy chỉnh khi triển khai ng-repeat. Cái gì đó như:

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js:

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

Bản giới thiệu Plunker


Cảm ơn vì công việc bạn đã đặt vào điều này. Chắc chắn nó đúng nhưng tôi đã kết thúc đi với sự dễ dàng của @ gion_13 câu trả lời trong các mã vì vậy tôi figured tôi tốt hơn đánh dấu của mình như là câu trả lời được chấp nhận
aron.duby
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.