<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更好的解決方案。

來源

2014-10-31 Alaksandar Jesus Gene

嗨@Alaksandar！歡迎來到Stackoverflow！我的答案能解決你的問題嗎？如果是這樣，你應該將其標記爲已接受，如果不能，請你解釋我怎樣才能讓它變得更好？謝謝！ – Josep 2014-10-31 19:47:10

@Josep感謝您的支持。我會解決它，並讓你張貼。 – 2014-11-13 06:53:32

使用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

隨着功能

如果你喜歡使用的功能，你可以做它是這樣的：

在你的公司ntroller補充一點：

$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); 
}

而且在你看來這樣做：

<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

來源

2014-10-31 04:06:25 Josep

Josep，看起來像你的例子你不能做選擇2-4的多選。 – Jarema 2014-10-31 04:13:53

哦！對不起給我一秒修復它！你是對的！我以爲你想讓他們成爲單選按鈕！我的錯！ – Josep 2014-10-31 04:14:49

是的。現在看起來不錯。 – Jarema 2014-10-31 04:28:58

角JS與特定的選擇複選框

回答

沒有功能

Example

隨着功能

Example

相關問題