只允許選中一個複選框，角度最佳練習。

使用角度的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

只允許選中一個複選框，角度最佳練習。

回答

相關問題