如何使用ng-repeat在角度中添加類以添加審閱目的？

這就是我到目前爲止，我的數據（通過get：方法期待json檢索）和html部分將做評論ng回顧審查;添加填充類。但它只是添加了所有。打開任何建議，就像這個指令一樣。

$scope.data = [{ 
    "_id": "56aa6f601c5e0d520e4a54ca", 
    "index": 0, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 5, 
    "name": "Kelli Alexander", 
    "comment": "Eu mollit officia enim cupidatat consequat. Elit ex reprehenderit sint veniam Lorem in ad non exercitation fugiat dolore esse ex. Exercitation occaecat ut dolore voluptate labore minim eiusmod ea quis. Consectetur deserunt id minim exercitation eu sit Lorem laboris. Nulla minim ea fugiat ex sit pariatur adipisicing incididunt officia nisi. Incididunt dolore consectetur sunt quis irure in. Labore ipsum deserunt dolor quis incididunt occaecat minim mollit mollit incididunt officia reprehenderit ut ipsum.\r\n", 
    "registered": "2014-06-09T04:11:13 +05:00", 
}, { 
    "_id": "56aa6f602b63c7bef8e4ad4b", 
    "index": 1, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 3, 
    "name": "Hopper Buck", 
    "comment": "Eiusmod aliquip pariatur consequat et eu laboris. Mollit mollit reprehenderit enim sint incididunt dolor aliqua Lorem commodo aute aliqua aliquip. Et pariatur exercitation culpa irure occaecat. Elit id laboris quis culpa quis aute dolor consequat excepteur officia enim ullamco enim elit. Sunt pariatur reprehenderit quis commodo velit enim exercitation mollit.\r\n", 
    "registered": "2014-04-11T03:22:35 +05:00", 
}, { 
    "_id": "56aa6f60fe9bae6d177b7137", 
    "index": 2, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 2, 
    "name": "Vera Mcfadden", 
    "comment": "Ipsum consectetur ipsum velit do nostrud officia excepteur. Laboris qui consectetur officia culpa est mollit ex. Ea qui proident ut aute consequat ea proident quis duis.\r\n", 
    "registered": "2015-10-05T12:46:04 +05:00", 
}, { 
    "_id": "56aa6f60d60a0c80b87fa3ed", 
    "index": 3, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 3, 
    "name": "Howard Christensen", 
    "comment": "Pariatur commodo dolore ipsum aute cupidatat ipsum adipisicing voluptate sit voluptate commodo. Sint cupidatat eu sunt Lorem ad. Enim ex irure sit tempor culpa. Culpa cillum commodo duis laborum pariatur do aliqua culpa commodo consectetur eiusmod. Sit esse aute ad cupidatat do et Lorem ut tempor cillum. Proident consequat reprehenderit nulla excepteur elit ea exercitation adipisicing. Excepteur ullamco tempor ipsum ipsum Lorem tempor fugiat amet Lorem.\r\n", 
    "registered": "2015-09-04T10:09:25 +05:00", 
}, { 
    "_id": "56aa6f60ba2f88f333bba049", 
    "index": 4, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 3, 
    "name": "Burke Reilly", 
    "comment": "Do ex culpa adipisicing commodo ut aute consectetur cillum est eiusmod ut minim excepteur. Reprehenderit ex incididunt occaecat commodo magna est commodo reprehenderit non ullamco. Lorem proident velit incididunt nostrud labore mollit laboris nostrud ut commodo fugiat. Sint aliqua laborum laboris mollit magna proident. Veniam anim ad in aute sunt reprehenderit ullamco nisi sunt velit consequat amet. Nisi ea amet in labore.\r\n", 
    "registered": "2014-11-18T09:16:38 +06:00", 
}, { 
    "_id": "56aa6f6061f6d711988c5521", 
    "index": 5, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 3, 
    "name": "Robyn Douglas", 
    "comment": "Proident cupidatat incididunt ut anim sit excepteur esse ad veniam reprehenderit. Nisi dolor labore occaecat irure reprehenderit deserunt aute amet. Magna veniam sint velit esse laboris officia est in ipsum tempor voluptate quis sunt. Proident eu duis elit aliqua non anim consectetur consequat ut do.\r\n", 
    "registered": "2015-12-18T01:58:11 +06:00", 
}, { 
    "_id": "56aa6f6018d679470f9c656c", 
    "index": 6, 
    "picture": " http://fillmurray.com/75/75", 
    "rating": 4, 
    "name": "Avery Merritt", 
    "comment": "Adipisicing proident consequat do aliquip. Anim magna deserunt ut culpa. In exercitation tempor quis in nisi nisi et velit nulla ea. Anim consequat mollit incididunt velit labore culpa qui consectetur in. Aliqua reprehenderit nostrud officia aliquip officia id amet ut proident aliquip adipisicing. Sunt incididunt minim et minim.\r\n", 
    "registered": "2015-12-18T01:58:11 +06:00", 
}];

添加最多5圈：

<i class="ion-ios-circle-filled" ng-class="{filled: review.rating}" ng- repeat="n in range(5) track by $index"></i>

編輯：嘗試這樣做是正確的，但它以相反的順序。

<i class="ion-ios-circle-filled" ng-class="{filled: $index < 5 - review.rating}" ng-repeat="n in range(5) track by $index"></i>

來源

2016-01-29 alphapilgrim

方式'NG-class'的工作原理是將上添加鍵值，或值如果右側的評估結果爲真，則左側如此填充。只要review.rating不計算爲false，填充的類將始終添加到元素中。 –

「填充」應用的條件是什麼？如果有評級？你可以給'ng-class'一個表達式，而不僅僅是一個屬性值。所以'ng-class =「{filled：reivew.rating> 0}」'會起作用。 – ste2425

@ ste2425沒有條件呢，paul147只是幫助我意識到，爲什麼他們全部填滿。 – alphapilgrim

你也許可以做在這裏ng-class比較，以達到你所要查找的內容：

<i class="ion-ios-circle-filled" ng-class="{filled: $index < review.rating}" ng-repeat="n in range(5) track by $index"></i>

來源

2016-01-29 21:40:33

完美！非常感謝@ paul147，感謝您幫助學習如何使用$ index。 – alphapilgrim

如何使用ng-repeat在角度中添加類以添加審閱目的？

回答

相關問題