Как переключаться между различными флажками Angular

Question

У меня есть четыре флажка, каждый щелчок на флажке инициирует другую функцию. Один флажок выбран, все остальные должны быть отменены. У меня есть следующий код, но проблема в том, что я не могу переключаться между проверкой без предварительного удаления флажка вручную, а затем выбора другого. Мой код:

$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, которая обрабатывает большинство случаев.