单击后,复选框值将更改为true / false

时间:2014-10-29 17:45:32

标签: angularjs forms

我正在根据模型$scope.config.kind中的值动态构建表单字段(复选框和下拉列表)。我正在根据模型中的值动态设置每个复选框的模型名称。表单创建正常,但是当我选中/选中复选框时,其值将更改为true和false。选择/取消选择时,如何更改标签?

 <div class="col-md-1">
            <div class="form-group">
                <label class="sm">Kind</label>
                <ul class="list-inline">
                    &nbsp;
                    <li ng-repeat="kind in config.kind">
                        <div class="checkbox">   
                            <label class="xsm-label">
                                <input type="checkbox" name="kind" ng-model="kind" ng-value="{{kind}}">&nbsp;{{kind}}
                            </label>
                        </div>
                    </li>
                </ul>    
            </div>

enter image description here

2 个答案:

答案 0 :(得分:2)

问题是因为您使用相同的变量来存储该类的名称和值。 复选框上的ng-model将变量设置为true或false。 解决方案是为每种类型提供一个对象:

$scope.config.kind = [{
  name: 'Bug',
  value: false
}, {
  name: 'Task',
  value: false
}, {
  name: 'RFE',
  value: true
}, {
  name: 'Other',
  value: false
}];

现在,您可以将视图重构为:

 <div class="col-md-1">
        <div class="form-group">
            <label class="sm">Kind</label>
            <ul class="list-inline">
                &nbsp;
                <li ng-repeat="kind in config.kind">
                    <div class="checkbox">   
                        <label class="xsm-label">
                            <input type="checkbox" name="kind" ng-model="kind.value" ng-value="{{kind.value}}">&nbsp;{{kind.name}}
                        </label>
                    </div>
                </li>
            </ul>    
        </div>

答案 1 :(得分:1)

您需要为ng-model和ng-value使用不同的变量,因为您将使用所选的true / false值覆盖该值。有几种方法可以做到这一点,但最重要的是你必须有一些其他数据结构来接收真/假值。

考虑将列表设为对象,例如:

  $scope.config = { kinds: [
                        {name:'Bug', selected: false},
                        {name:'Task', selected: false},
                        {name:'RFE', selected: false},
                        {name:'Other', selected: false}
                        ]}

以便可以更改“选定”值。请看这里的plunker:http://plnkr.co/edit/O4qL2hB2El6eB6P96XfE