다른 확인란 사이를 전환하는 방법 각도

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

: 모든 체크 박스에 대한 ng-model에 대한

1. 를 사용하여 하나 개의 공통 변수,

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에 대한 멋진 사용자 지정 지침이 있습니다.