【问题标题】:Change checkbox state based on multiple conditions in AngularJS根据AngularJS中的多个条件更改复选框状态
【发布时间】:2013-09-23 22:02:17
【问题描述】:

在我的场景中,我有一个选择下拉菜单,其中分配了一个 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

因此,“是动物”和“有四只腿”复选框并不是唯一的。我当前的实现使用一个简单的条件表达式来评估复选框是否被标记(ng-checked="animal=='dog'"),但这当然排除了其他两种可能性。所以我想知道是否有一种原生的 Angular 方式来处理 OR 语句或数组。或者如果没有,我该如何使用 JavaScript 或 jQuery 来解决这个问题?

【问题讨论】:

    标签: javascript angularjs checkbox


    【解决方案1】:

    看到这个小提琴: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;
    }
    

    【讨论】:

    • 啊太棒了!这么简单的解决方案。非常感谢。
    猜你喜欢
    • 1970-01-01
    • 2019-09-26
    • 2023-03-18
    • 1970-01-01
    • 2018-12-06
    • 1970-01-01
    • 1970-01-01
    • 2020-08-13
    • 1970-01-01
    相关资源
    最近更新 更多