Angular.js - 瞭解ng類查詢中可以使用哪些語句

Angular文檔對於條件爲ng-class中的「表達式」可以接受的內容真的很稀少。Angular.js - 瞭解ng類查詢中可以使用哪些語句

例如，我在一個列表上運行的ng-repeat：

<ul class="clothes"> 
    <li ng-repeat="piece in clothes | filter:query"> 
    {{piece.name}} 
    </li> 
</ul>

在我想補充一類的「第三」每三個<li>元素。這可以使用ng-class來完成，例如ng-class="{third : li:nth-child(3)}"或類似的東西？

旁註，是否有一個通用的參考文獻定義並給出了可用於Angular表達式的示例？我可以用vanilla Javascript/css做一些非常基本的工作，但是我無法解決如何將它塞進Angular！

這裏是一些關於角度表達式的文檔。 http://docs.angularjs.org/guide/expression – 2013-05-12 11:55:33

那麼最好的方法是創建一個角度方法並調用它？我在提問之前先閱讀了部分文檔，但我並不真正瞭解解決此問題的最佳方法/無法找到任何類似的示例。 – Jascination 2013-05-12 12:03:07

是的，我的經驗是，如果你的條件不是很簡單，最好的辦法是創建一個返回true/false的函數。 – 2013-05-12 12:06:16

只需創建一個計算結果爲true或false的表達式，有點類似於Javascript表達式但有一些差異，您可以閱讀它here。

<ul> 
     <li ng-repeat="item in items" ng-class="{third: !(($index+1)%3) && !$first }">{{item}}</li> 
</ul>

這是jsBin。（$ index + 1）％3爲零並且它不是$ first列表項（$ index，$ first和$ last）時，我在告訴ng-class添加類'third'由ng-repeat創建）。

2013-05-12 12:15:26 Bema

啊，這很完美，謝謝。我沒有意識到，在$ index，$ first和$ last傳遞的ng-repeat非常方便，以便將來參考。感謝您在答案中解釋這一點。 – Jascination 2013-05-12 12:24:11

，如果你想使用CSS，而不是角的造型，你可以使用CSS第n個選擇

李：第n個孩子（3N + 3） { 背景：＃FF0000 ; }

2013-05-12 12:21:51 Anton

這在大多數情況下都能正常工作，但它是否允許Angular的迴流？（例如，如果應用程序刷新了列表，並且第三項不再是第三項，那麼將適用相同的規則？） – Jascination 2013-05-12 12:38:09

我相信會這樣，因爲瀏覽器正在重新渲染。可能必須在不同的設備/瀏覽器上進行測試 – Anton 2013-05-12 13:29:50

回答