比較兩個數組和改變風格NG-重複項目的角度

我有這樣一個JSON -比較兩個數組和改變風格NG-重複項目的角度

[{ 
    "id": "152", 
    "name": "Accounting", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:10:57", 
    "updated_at": "2016-12-20 18:10:57" 
}, { 
    "id": "292", 
    "name": "Administration", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:37:29", 
    "updated_at": "2016-12-20 18:37:29" 
}, { 
    "id": "422", 
    "name": "Banquet", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:43:26", 
    "updated_at": "2016-12-20 18:43:26" 
}, { 
    "id": "502", 
    "name": "Engineering & Maintenance", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:47:12", 
    "updated_at": "2016-12-20 18:47:12" 
}, { 
    "id": "622", 
    "name": "Food & Beverage Admin", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:51:00", 
    "updated_at": "2016-12-20 18:51:00" 
}, { 
    "id": "782", 
    "name": "Food & Beverage Service", 
    "parent_id": "0", 
    "created_at": "2016-12-20 18:56:38", 
    "updated_at": "2016-12-20 18:56:38" 
}, { 
    "id": "982", 
    "name": "Front Office", 
    "parent_id": "0", 
    "created_at": "2016-12-20 19:05:04", 
    "updated_at": "2016-12-20 19:05:04" 
}, { 
    "id": "1212", 
    "name": "Housekeeping & Laundry", 
    "parent_id": "0", 
    "created_at": "2016-12-20 19:15:48", 
    "updated_at": "2016-12-20 19:15:48" 
}, { 
    "id": "1352", 
    "name": "HR", 
    "parent_id": "0", 
    "created_at": "2016-12-21 10:12:38", 
    "updated_at": "2016-12-21 10:12:38" 
}, { 
    "id": "1462", 
    "name": "IT", 
    "parent_id": "0", 
    "created_at": "2016-12-21 10:16:14", 
    "updated_at": "2016-12-21 10:16:14" 
}, { 
    "id": "1492", 
    "name": "Kitchen/Food Preparation", 
    "parent_id": "0", 
    "created_at": "2016-12-21 10:17:29", 
    "updated_at": "2016-12-21 10:17:29" 
}, { 
    "id": "1712", 
    "name": "Purchase", 
    "parent_id": "0", 
    "created_at": "2016-12-21 10:26:09", 
    "updated_at": "2016-12-21 10:26:09" 
}]

這是我在與NG-重複列表我迭代。

現在我有另一個數組一樣

[152,292,422,1712].

現在我該怎樣與第一陣列的ID第二陣列相匹配，並改變這些ID匹配的對象的樣式在視圖中。

請建議。

來源

2016-12-26 Nabarag Paul

任何人都可以幫助我嗎？ –

您可以使用ngClass指令。該代碼會是這個樣子，假設JSON是保存爲foodList：

<div ng-repeat="food in foodList"> 
    <div ng-class="{'classNameToWantedStyle': isIDInList(food.id)}"> 
    {{food.name}} 
    </div> 
</div>

和控制器，你會做，如果ID是在列表中，則返回true相應的功能。在這裏你可以使用javascripts indextOf方法來確定。

來源

2016-12-26 10:25:08

謝謝Anders Vestergaard。讓我嘗試一下。 :) –

我做了一個jsfiddle以防萬一：http://jsfiddle.net/ny8eLxr8/215/ –

這是我想要的東西。謝謝。我接受你的答案。 –

假設「項目」是數組的名字，那麼你有你的NG-重複：

<div ng-repeat="item in items">

可以使用ng-switch（或here）審查每一個項目，然後分開了這一點段是你可以以不同的風格：

<div ng-switch="item.id"> 
    <div ng-switch-when="152" class="152-class"></div> 
    <div ng-switch-when="292" class="292-class"></div> 
    <div ng-switch-default class="default-class"></div> 
</div>

你明白了，但看看我鏈接的文檔，他們可能會更好地解釋它。

來源

2016-12-26 10:16:46 rrd

我很感謝你的幫助rrd。讓我看一看。謝謝 –

以及我不能真正使用ng-switch，因爲這些數組是動態的，數據可以是任何東西。 –

比較兩個數組和改變風格NG-重複項目的角度

回答

相關問題