只允许选中一个复选框，角度最佳练习。

使用角度的Im。我在一个组中有三个复选框，我想确保只有其中一个可以被检查。所以如果一个人被检查，另外两个人必须不加注意。我可以考虑用原生JS或jQuery做几种方法，但我想知道是否有典型的Angular方法。只允许选中一个复选框，角度最佳练习。

这里是一个复选框和角控制设置的Plunker。 http://plnkr.co/edit/IZmGwktrCaYNyrWjfSqf?p=preview

<body ng-controller="MainCtrl"> 
 

 
    <div> 
 
    {{vm.Output}} 
 

 
    <br> 
 
    <br> 
 
    <br> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label> 
 
    <label> 
 
     <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label> 
 

 
    <br> 
 
    <br> 
 
    <br> {{vm.Output}} 
 
</body>

来源

2016-10-07 Lautaro

不应该你可以使用单选按钮，然后？如果只有其中一个可以检查？ http://plnkr.co/edit/uXoLoqO4gap0Xg9SpTle?p=preview –

我试过，但没有。由于任务的细节。单选按钮不能被选中，模型没有余地可以选择一个“没有选择”的单选按钮。 – Lautaro

老实说，改变设计为第四个单选按钮腾出空间使得使用复选框更有意义。 – Quentin

既然你不能使用单选按钮，我做了这个plnkr当你选中一个其他人都放弃了：

http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview

<label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" > A1 </label> 
<label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" > A2 </label> 
<label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" > A3 </label>

希望它可以帮助=）

编辑：您可以更改控制器中其他复选框的状态以获得最佳实践，只需在html中制作即可更快地展示。

来源

2016-10-07 14:35:13

BRILLIANT！我知道这样做有很好的角度。我爱你。 – Lautaro

无法接受答案。但我会。 – Lautaro

-1

你为什么不只是使用一个单选按钮？

<label> 
    <input type="radio" name="groupA" ng-model="vm.a1" ng-change="vm.changeGroupA()"> A1 </label> 
<label> 
    <input type="radio" name="groupA" ng-model="vm.a2" ng-change="vm.changeGroupA()"> A2 </label> 
<label> 
    <input type="radio" name="groupA" ng-model="vm.a3" ng-change="vm.changeGroupA()"> A3 </label>

来源

2016-10-07 14:30:10

我试过但没有。由于任务的细节。单选按钮不能被选中，模型没有额外的'没有选择'单选按钮的空间 – Lautaro

对不起，你可能应该把它放在原来的问题中。 –

你可能想要做到这一点很难。 http://plnkr.co/edit/A53w4IJMRXQmvRsxa8JA，它应该工作

changeGroupA : function (x) { if (x === 'A1'){ $scope.vm.a1 = true; $scope.vm.a2 = false; $scope.vm.a3 = false; } else if (x === 'A2') { $scope.vm.a2 = true; $scope.vm.a1 = false; $scope.vm.a3 = false; } else if (x === 'A3') { $scope.vm.a3 = true; $scope.vm.a1 = false; $scope.vm.a2 = false; } this.Output = '(' + this.count + ')' + this.Output; this.count ++; },

来源

2016-10-07 14:53:22 Gary

另一种方式来做到这一点是：http://plnkr.co/edit/kH12pYkXfY6t6enrlSns

<br><br><br> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[0]" ng-change="vm.changeGroupA(0)" > A1 </label> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[1]" ng-change="vm.changeGroupA(1)" > A2 </label> 
    <label> <input type="checkbox" name="groupA" ng-model="vm.groupA[2]" ng-change="vm.changeGroupA(2)" > A3 </label> 

    <br><br><br>

控制器是这样的：

$scope.vm = { 

    groupA: [false, true, false], 
    count : 0, 

    changeGroupA : function (index) 
    { 


    for (i = 0, len = this.groupA.length; i < len; ++i) { 
     this.groupA[i] = ((1 << index) & (1 << i)) > 0; 
    } 


    this.Output = '(' + this.count + ')' + this.Output; 
    this.count ++; 

    }, 

    Output : 'Here we go' 

}

来源

2016-10-07 16:27:14

只允许选中一个复选框，角度最佳练习。

回答

相关问题