2014-10-31 4 views
1
<body ng-app="workApp"> 
<div ng-controller="firstClaimController"> 
<input type="checkbox" ng-click="sbcfunction()"> Option 1 
<input type="checkbox" ng-click="sbcfunction()"> Option 2 
<input type="checkbox" ng-click="sbcfunction()"> Option 3 
<input type="checkbox" ng-click="sbcfunction()"> Option 4 

      {{myValue}} 
     </div> 

    <script type="text/javascript" > 
     var claimController = angular.module('workApp', []); 
     claimController.controller('firstClaimController', function($scope){ 
    // Test the controller whether it works 
     $scope.myValue = "asdf"; 
    // 
      $scope.sbcfunction = function() { 

      }; 
    }); 
    </script> 

위 코드는 4 개의 체크 박스입니다. 목표는 옵션 1이 단일 선택이고 옵션 2-4가 다중 선택입니다. 옵션 1을 선택하면 옵션 2-4가 자동으로 선택 해제되어야합니다. 옵션 2-4를 선택하면 옵션 1을 선택 취소해야합니다.특정 선택 확인란이있는 각도 JS

angularjs가있는 더 나은 솔루션을 찾고 있습니다.

+0

안녕 @Alaksandar을! Stackoverflow에 오신 것을 환영합니다! 내 대답이 당신의 질문을 해결합니까? 만약 당신이 받아 들일 수있는 것으로 표시해야한다면, 그것을 설명 할 수 없다면 어떻게 설명 할 수 있습니까? 감사! – Josep

+0

@Josep 지원해 주셔서 감사합니다. 나는 그것을 해결하고 계속 게시 할 것입니다. –

답변

2

ng-change을 사용하십시오. 기능

이 당신이 원하는 방식으로 작동합니다 그것없이

: 기능이 기능을 사용하려는 경우, 당신이 할 수있는

<label><input type="checkbox" ng-model="option1" ng-change="multiOption1=multiOption1&&!option1;multiOption2=multiOption2&&!option1;multiOption3=multiOption3&&!option1"> Option 1</label> 
<label><input type="checkbox" ng-model="multiOption1" value="option2" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 2</label> 
<label><input type="checkbox" ng-model="multiOption2" value="option3" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 3</label> 
<label><input type="checkbox" ng-model="multiOption3" value="option4" ng-change="option1=!(multiOption1||multiOption2||multiOption3)"> Option 4</label> 

Example

그것을 좋아해 :

당신의 공동

$scope.option1=true; 
$scope.option1Changed=function(){ 
    $scope.multiOption1=$scope.multiOption1&&!$scope.option1; 
    $scope.multiOption2=$scope.multiOption2&&!$scope.option1; 
    $scope.multiOption3=$scope.multiOption3&&!$scope.option1; 
} 
$scope.multiOptionsChanged=function(){ 
    $scope.option1=!($scope.multiOption1||$scope.multiOption2||$scope.multiOption3); 
} 

을 그리고보기에이 작업을 수행 : ntroller이 추가

<input type="checkbox" ng-model="option1" ng-change="option1Changed()"> Option 1 
<input type="checkbox" ng-model="multiOption1" value="option2" ng-change="multiOptionsChanged()"> Option 2 
<input type="checkbox" ng-model="multiOption2" value="option3" ng-change="multiOptionsChanged()"> Option 3 
<input type="checkbox" ng-model="multiOption3" value="option4" ng-change="multiOptionsChanged()"> Option 4 

Example

+0

Josep, 귀하의 예와 같습니다. 옵션 2-4로 다중 선택을 할 수 없습니다. – Jarema

+0

오! 죄송합니다. 잠시만 기다려주세요. 당신 말이 맞아요! 나는 당신이 그들에게 라디오 버튼이되기를 바랐다 고 생각했다. 내 잘못이야! – Josep

+1

예. 이제는 좋아 보인다. – Jarema