異なるチェックボックス間を切り替える方法角度

Question

私はチェックボックスをクリックするたびに4つのチェックボックスがあり、異なる機能が開始されます。 1つ1つのチェックボックスが選択されている場合は、それ以外のすべてのチェックボックスをオフにします。私は次のコードを持っていますが、問題は、最初に手動でチェックマークを外してからもう一方を選択しなければチェックを切り替えることができないということです。 マイコード：

$scope.checkbox = function(key){ 
     if($scope.checkbox1 === true){ 
      $scope.checkbox2 = false 
      $scope.checkbox3 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox one was clicked' 
      callfunctionOne() 
     } else if($scope.checkbox2 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox3 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox two was clicked' 
      callfunctiontwo() 
     } else if($scope.checkbox3 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox2 = false 
      $scope.checkbox4 = false 
      $scope.checkboxValue = 'checkbox three was clicked' 
      callfunctionthree() 
     } else if($scope.checkbox4 === true){ 
      $scope.checkbox1 = false 
      $scope.checkbox2 = false 
      $scope.checkbox3 = false 
      $scope.checkboxValue = 'checkbox Four was clicked' 

     callfunctionFour() 
     } 

     } 

Plunker

Answer 1

$scope.checkbox = function(key){ 
    $scope.checkbox1 = false 
    $scope.checkbox2 = false 
    $scope.checkbox3 = false 
    $scope.checkbox4 = false 
    $scope[key] = true; 
    $scope.checkboxValue = 'checkbox '+key+' was clicked' 
} 

あなたはラジオボタンを使用することを検討すべきであるが、このコードは、あなたがやりたいことができます。

Answer 2

あなたはあなたのコードのために、このアプローチを使用することができます。

1. 使用するすべてのチェックボックスについてng-model、

2. ための一つの共通の変数を、次に

を選択されたチェックボックスを識別するために ng-true-valueを使用

例：Plunker

<!-- AngularJS Code --> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.setValues = function(){ 
    $scope.checkbox1 = false; 
    $scope.checkbox2 = false; 
    $scope.checkbox3 = false; 
    $scope.checkbox4 = false; 

    $scope['checkbox'+tempVariable] = true; 
    }; 
}); 
</script> 

<!-- HTML Code --> 
<label class="label--checkbox " id="checkbox1"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="1"> 
    <span class="checkboxLabelText"> 
    Checkbox 1 : {{checkbox1}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox2"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="2"> 
    <span class="checkboxLabelText"> 
    Checkbox 2 : {{checkbox2}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox3"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="3"> 
    <span class="checkboxLabelText"> 
    Checkbox 3 : {{checkbox3}} 
    </span> 
</label> 

<label class="label--checkbox" id="checkbox4"> 
    <input type="checkbox" class="checkbox" ng-model="tempVariable" ng-click="setValues()" ng-true-value="4"> 
    <span class="checkboxLabelText"> 
    Checkbox 4 : {{checkbox4}} 
    </span> 
</label> 

Answer 3

私はあなたが必要な答えを得たと仮定しますが、ここでは大部分のケースを扱うMulti checkboxの素晴らしいカスタムディレクティブがあります。