[Javascript] AngularJS ng-repeat沒有html元素


Answers

KnockoutJS無容器綁定語法

請耐心等待:KnockoutJS為foreach綁定提供了一種使用無容器綁定語法的超便利選項,如在foreach綁定文檔的註釋4中所討論的。 http://knockoutjs.com/documentation/foreach-binding.html

如Knockout文檔示例所示,您可以在KnockoutJS中編寫您的綁定,如下所示:

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

我認為這是相當不幸的AngularJS不提供這種類型的語法。

Angular的ng-repeat-startng-repeat-end

在AngularJS解決ng-repeat問題的方式中,我遇到的樣本是jmagnusson在他的(有用的)答案中發布的類型。

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

我看到這個語法的原始思想是:真的嗎? 為什麼Angular強迫所有這些額外的標記,我不想做任何事情,這在Knockout中更容易? 但是,然後在jmagnusson的回答中,hitautodestruct的評論開始讓我懷疑:在單獨的標籤上使用ng-repeat-start和ng-repeat-end產生了什麼?

使用ng-repeat-startng-repeat-end更簡潔的方法

在調查hitautodestruct的斷言之後,將ng-repeat-end添加到單獨的標記中正是我在大多數情況下不想做的事情,因為它會生成完全無用的元素:在這種情況下, <li>項中沒有任何內容。 Bootstrap 3的分頁列表對列表項進行了樣式設置,以使其看起來像您沒有生成任何多餘的項目,但是當您檢查生成的HTML時,它們就在那裡。

幸運的是 ,你不需要做太多的工作來獲得更清晰的解決方案和更少量的html: 只需將ng-repeat-end聲明放在具有ng-repeat-start的相同html標籤上即可

<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>

這有三個好處:

  1. 少寫html標籤
  2. 無用的空標籤不是由Angular生成的
  3. 當要重複的數組為空時,帶有ng-repeat的標籤將不會生成,從而為您提供相同的優勢Knockout的無容器綁定為您提供了這方面的幫助

但是仍然有一個更清晰的方法

在進一步回顧github上有關Angular的這個問題的評論之後, https://github.com/angular/angular.js/issues/1891
您不需要使用ng-repeat-startng-repeat-end來獲得相同的優勢。 相反,再次分出jmagnusson的例子,我們可以去:

<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>

那麼何時使用ng-repeat-startng-repeat-end ? 根據角度文件 ,to

...重複一系列元素而不僅僅是一個父元素...

足夠的談話,展示一些例子!

很公平; 這個jsbin通過五個例子來說明當你做什麼時以及當你不在同一個標籤上使用ng-repeat-end時會發生什麼。

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

Question

我目前使用這段代碼來呈現一個列表:

<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>

但是, <div>元素在某些瀏覽器上導致一些非常小的渲染缺陷。 我想知道是否有一種方法可以在不使用div容器的情況下執行ng-repeat,或者使用其他方法來實現相同的效果。




我最近遇到了同樣的問題,因為我不得不重複一個任意的跨度和圖像集合 - 圍繞它們的元素不是一個選項 - 然而,有一個簡單的解決方案,創建一個“null”指令:

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

然後,您可以對該元素使用重複,其中element.url指向該元素的模板:

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

這將重複任何數量的不同模板,而且周圍沒有容器

注意:嗯,我可以發誓盲目的,當渲染時刪除了di-null元素,但再次檢查它不... ...仍然解決了我的佈局問題,儘管...古怪和好奇...




如果你使用的是Bootstrap,沒有Angular的魔術方法可以做到這一點,你可以做到這一點,以獲得有效的HTML。 然後你會得到與添加li.divider相同的效果

創建一個班級:

span.divider {
 display: block;
}

現在將您的代碼更改為:

<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>