AngularJS ng-repeat không có phần tử html

Question 1

Tôi hiện đang sử dụng đoạn mã này để hiển thị danh sách:

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

Tuy nhiên, <div>phần tử này đang gây ra một số lỗi hiển thị rất nhỏ trên một số trình duyệt. Tôi muốn biết có cách nào để thực hiện ng-repeat mà không cần vùng chứa div, hoặc một số phương pháp thay thế để đạt được hiệu quả tương tự.

Question 2

Như Andy Joslin đã nói rằng họ đang làm việc dựa trên bình luận ng-lặp lại nhưng dường như có quá nhiều vấn đề về trình duyệt . May mắn thay AngularJS 1.2 thêm hỗ trợ tích hợp để lặp lại mà không cần thêm các phần tử con với các chỉ thị mới ng-repeat-startvà ng-repeat-end.

Đây là một ví dụ nhỏ để thêm phân trang Bootstrap :

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Một ví dụ làm việc đầy đủ có thể được tìm thấy ở đây .

John Lindquist cũng có một video hướng dẫn về điều này tại trang egghead.io tuyệt vời của anh ấy .

Question 3

Cú pháp ràng buộc không chứa KnockoutJS

Vui lòng thông báo cho tôi một chút: KnockoutJS cung cấp một tùy chọn cực kỳ thuận tiện là sử dụng cú pháp liên kết không chứa cho foreachliên kết của nó như đã thảo luận trong Chú thích 4 của foreachtài liệu ràng buộc. http://knockoutjs.com/documentation/foreach-binding.html

Như ví dụ tài liệu Knockout minh họa, bạn có thể viết ràng buộc của mình trong KnockoutJS như sau:

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

Tôi nghĩ rằng khá đáng tiếc là AngularJS không cung cấp loại cú pháp này.

Angular's `ng-repeat-start`và`ng-repeat-end`

Trong cách AngularJS để giải quyết ng-repeatvấn đề, các mẫu tôi bắt gặp thuộc loại jmagnusson được đăng trong câu trả lời (hữu ích) của anh ấy.

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

Suy nghĩ ban đầu của tôi khi nhìn thấy cú pháp này là: thực sự? Tại sao Angular buộc tất cả các đánh dấu bổ sung này mà tôi không muốn làm gì cả và điều đó dễ dàng hơn nhiều trong Knockout? Nhưng sau đó nhận xét của hitautodestruct trong câu trả lời của jmagnusson bắt đầu khiến tôi tự hỏi: điều gì đang được tạo với ng-repeat-start và ng-repeat-end trên các thẻ riêng biệt?

Một cách tốt hơn để sử dụng `ng-repeat-start`và`ng-repeat-end`

Khi điều tra về khẳng định của hitautodestruct, việc thêm ng-repeat-endvào một thẻ riêng biệt là chính xác những gì tôi không muốn làm trong hầu hết các trường hợp, bởi vì nó tạo ra các phần tử hoàn toàn vô dụng: trong trường hợp này, <li>các mục không có gì trong đó. Danh sách phân trang của Bootstrap 3 tạo kiểu cho các mục trong danh sách để có vẻ như bạn không tạo ra bất kỳ mục thừa nào, nhưng khi bạn kiểm tra html được tạo, chúng ở đó.

May mắn thay , bạn không cần phải làm gì nhiều để có một giải pháp sạch hơn và số lượng html ngắn hơn: chỉ cần đặt ng-repeat-endkhai báo trên cùng một thẻ html cóng-repeat-start .

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Điều này mang lại 3 lợi thế:

ít thẻ html để viết
các thẻ trống, vô dụng không được tạo bởi Angular
khi mảng cần lặp lại trống, thẻ với ng-repeatsẽ không được tạo, mang lại cho bạn lợi thế tương tự như ràng buộc không chứa của Knockout mang lại cho bạn về mặt này

Nhưng vẫn có một cách sạch hơn

Sau khi xem xét thêm các nhận xét trong github về vấn đề này cho Angular, https://github.com/angular/angular.js/issues/1891 ,
bạn không cần sử dụng ng-repeat-startvà ng-repeat-endđạt được những lợi ích tương tự. Thay vào đó, làm lại ví dụ của jmagnusson, chúng ta chỉ có thể đi:

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Vậy sử dụng khi nào ng-repeat-startvà ng-repeat-end? Theo tài liệu góc , để

... lặp lại một loạt các phần tử thay vì chỉ một phần tử mẹ ...

Nói đủ rồi, chỉ ra một số ví dụ!

Đủ công bằng; jsbin này sẽ trình bày qua năm ví dụ về những gì sẽ xảy ra khi bạn làm và khi bạn không sử dụng ng-repeat-endtrên cùng một thẻ.

http://jsbin.com/eXaPibI/1/

Question 4

ngRepeat có thể là không đủ, tuy nhiên bạn có thể kết hợp điều đó với một chỉ thị tùy chỉnh. Bạn có thể ủy thác nhiệm vụ thêm các mục của bộ chia vào mã nếu bạn không bận tâm một chút về jQuery.

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

Một chỉ thị đơn giản như vậy không thực sự cần một giá trị thuộc tính nhưng có thể cung cấp cho bạn nhiều khả năng như thêm một dấu chia có điều kiện theo chỉ mục, độ dài, v.v. hoặc một cái gì đó hoàn toàn khác.

Question 5

Gần đây, tôi đã gặp phải vấn đề tương tự là tôi phải lặp lại một tập hợp các khoảng và hình ảnh tùy ý - có một phần tử xung quanh chúng không phải là một lựa chọn - tuy nhiên, có một giải pháp đơn giản, hãy tạo một chỉ thị "null":

app.directive("diNull", function() {
        return {
            restrict: "E",
            replace: true,
            template: ""
        };
    });

Sau đó, bạn có thể sử dụng lặp lại trên Phần tử đó, trong đó element.url trỏ đến mẫu cho phần tử đó:

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

Điều này sẽ lặp lại bất kỳ số lượng mẫu khác nhau nào mà không có vùng chứa xung quanh chúng

Lưu ý: hmm, tôi có thể đã thề rằng điều này đã xóa phần tử di-null khi kết xuất, nhưng kiểm tra lại nó không ... vẫn giải quyết được các vấn đề về bố cục của tôi mặc dù ... tò mò và tò mò ...

Question 6

Có một giới hạn chỉ thị nhận xét, nhưng ngRepeat không hỗ trợ nó (vì nó cần một phần tử lặp lại).

Tôi nghĩ rằng tôi đã thấy nhóm góc cạnh nói rằng họ sẽ làm việc với các bình luận ng-lặp lại, nhưng tôi không chắc. Bạn nên mở một vấn đề cho nó trên repo. http://github.com/angular/angular.js

Question 7

Không có cách kỳ diệu Angular nào để làm điều này, đối với trường hợp của bạn, bạn có thể làm điều này, để lấy HTML hợp lệ, nếu bạn đang sử dụng Bootstrap. Sau đó, bạn sẽ nhận được hiệu ứng tương tự như thêm li.divider

Tạo một lớp học:

span.divider {
 display: block;
}

Bây giờ hãy thay đổi mã của bạn thành:

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>

Question 8

cho một giải pháp thực sự hiệu quả

html

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

thêm một chỉ thị angle.js

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

để được giải thích ngắn gọn,

ng-repeat tự liên kết với <remove>phần tử và lặp lại như nó cần, và vì chúng ta đã sử dụng ng-repeat-start / ng-repeat-end nên nó lặp lại một khối html không chỉ là một phần tử.

sau đó, lệnh remove custom sẽ đặt các <remove>phần tử bắt đầu và kết thúc bằng