如何添加類到Angular的單選按鈕和複選框（如果選中或未選中）

Question

如果項目被選中，我想使用ngClass。基本上，如果設置了特定模型的數據並且在視覺上用戶將會看到在單選按鈕或複選框上選擇的項目，該類將被添加到它，這也允許我爲檢查/選定的項目。我正在使用http://vitalets.github.io/checklist-model/來設置複選框，並且使用單選按鈕的常規ngRepeat。在複選框模型中，它們顯示已選中的複選框集中的用戶項目。我希望用戶加載頁面，並且已經選擇了該項目，但也會將一個類添加到所選的項目中。我不想依賴於「更改」功能，因爲這需要用戶採取行動。我希望它綁定到頁面或在ngClass中。

我已經看過How do I conditionally apply CSS styles in AngularJS? 但它似乎沒有幫助我的情況。

任何幫助表示讚賞。

Answer 1

可以有條件地應用類，像這樣：

<div ng-repeat="animal in animals"> 
    <input type="checkbox" ng-model="animal.isHungry" ng-class="{'when-condition-true': animal.isHungry}"> 
</div> 

類在當前animal的isHungry屬性是控制器truthy when-condition-true將被應用。

或者也可以有條件地轉一類，像這樣：

<div ng-repeat="animal in animals"> 
    <input type="checkbox" ng-model="animal.isHungry" ng-class="animal.isHungry ? 'when-condition-true' : 'when-condition-false'"> 
</div> 

這兩項將在頁面加載工作，並不需要從用戶的交互。但是，當他們檢查並取消選中時，您的課程將自動添加或刪除。