[英]Change checkbox state based on multiple conditions in AngularJS
在我的場景中,我有一個選擇下拉列表,並為其分配了ng-model。 下拉列表中的每個項目對應於在進行選擇時檢查的多個復選框。 困難在於我不能只檢查一個簡單的密鑰:值因為復選框不是任何特定選擇所獨有的。 例如:
<select>
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
</select>
<input type="checkbox">Is an animal
<input type="checkbox">Can bark
<input type="checkbox">Can meow
<input type="checkbox">Can tweet
<input type="checkbox">Has four legs
<input type="checkbox">Has wings
盡可能地,“Is a animal”和“Has four legs”的復選框不是唯一的。 我當前的實現使用一個簡單的條件表達式來評估復選框是否被標記(ng-checked =“animal =='dog'”),但當然這排除了其他兩種可能性。 所以我想知道是否有一種原生的Angular方式來處理OR語句或數組。 或者如果沒有,我如何使用JavaScript或jQuery進行此操作?
看到這個小提琴: http : //jsfiddle.net/QHza7/
模板:
<div ng-app ng-controller="Test">
<select ng-model="opts" ng-options="a.opts as a.name for a in answers"></select>
<br/>
<input type="checkbox" ng-model="opts.animal" />Is an animal<br/>
<input type="checkbox" ng-model="opts.bark" />Can bark<br/>
<input type="checkbox" ng-model="opts.meow" />Can meow<br/>
<input type="checkbox" ng-model="opts.tweet" />Can tweet<br/>
<input type="checkbox" ng-model="opts.legs4" />Has four legs<br/>
<input type="checkbox" ng-model="opts.wings" />Has wings<br/>
</div>
碼:
function Test($scope) {
$scope.answers = [
{name:"Dog", opts:{animal:true,bark:true,legs4:true}},
{name:"Cat", opts:{animal:true,meow:true,legs4:true}},
{name:"Bird", opts:{animal:true,tweet:true,wings:true}}
];
$scope.opts = null;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.