Question

问题：我们有一组复选框。我想一次只检查一个（如单选按钮）。

我这样做。

在查看

中

<div>
  <input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
    <div ng-if="first">
         <label>Hi</label>
    </div>
  <input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
    <div ng-if="second">
         <label>Adem</label>
    </div>
</div>

在控制器

中

function controller(){
   $scope.checkOne=function(val){
     if(val == '1'){
        $scope.first=true;
        $scope.second=false;
       }
     if(val == '2'){
        $scope.second=true;
        $scope.first=false; 
       }
   }
}

但它没有工作。它选择了两个复选框。

请建议我一个解决方案。

感谢。

Answer 1

试试这个：

<html ng-app>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">   </script>
<script src="script.js"></script>

 </head>
<body>
<div ng-controller="controller">
<input type="checkbox" ng-model="first" ng-change="checkOne('1')" />
<div ng-if="first">
     <label>Hi</label>
</div>
 <input type="checkbox" ng-model="second" ng-change="checkOne('2')" />
<div ng-if="second">
     <label>Adem</label>
    </div>
 </div>
 </body>
 </html>

的script.js

  function controller($scope) {

  $scope.checkOne=function(val){
    if(val == '1'){
    $scope.first=true;
    $scope.second=false;
   }
   if(val == '2'){
    $scope.second=true;
    $scope.first=false; 
   }
  }
  }

Answer 2

http://plnkr.co/edit/WEn4CBXA3RvtZ33VuPyM?p=preview

您需要使用ng-checked。我还设置了禁用的任何选中复选框，以便不能取消选中它们。之后，这是一个带有switch语句的简单函数，可以在ng-click上切换所有这些函数。

控制器：

$scope.firstCheck = true;
$scope.checkToggle = function(checkbox) {
switch (checkbox) {
  case 'first': 
    $scope.firstCheck = true;
    $scope.secondCheck = false;
    $scope.thirdCheck = false;
    break;
    case 'second': 
    $scope.firstCheck = false;
    $scope.secondCheck = true;
    $scope.thirdCheck = false;
    break;
    case 'third': 
    $scope.firstCheck = false;
    $scope.secondCheck = false;
    $scope.thirdCheck = true;
    break;
}
}

HTML：

<div>
<input type="checkbox" ng-disabled="firstCheck" ng-click="checkToggle('first')" ng-model="first" ng-checked="firstCheck"  />
<div ng-if="first">
     <label>Hi</label>
</div>
<br/><input type="checkbox" ng-disabled="secondCheck" ng-click="checkToggle('second')" ng-model="second" ng-checked="secondCheck" />
<div ng-if="second">
     <label>Adem</label>
</div>
<br/><input type="checkbox" ng-disabled="thirdCheck" ng-click="checkToggle('third')" ng-model="third" ng-checked="thirdCheck" />
<div ng-if="third">
     <label>something else</label>
</div>

Answer 3

Checkbox视为RadioButton：这里我们有四个复选框，所有都应该作为RadioButton工作。带有ng-change的复选框用于ng-model的更改值。

http://plnkr.co/edit/yTJUZcFoLsSEBjruRuEY?p=preview

App.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.first = false;
  $scope.second = false;
  $scope.third = false;
  $scope.fourth = false;
});

HTML

 <div>{{first}}|{{second}}|{{third}}|{{fourth}}
  <br/>
  <input type="checkbox" ng-model="first" ng-change="second=false;third = false;fourth = false;"  />
  <input type="checkbox" ng-model="second" ng-change="first = false;third = false;fourth = false;" />
  <input type="checkbox" ng-model="third" ng-change="first =false;second = false;fourth = false;" />
  <input type="checkbox" ng-model="fourth" ng-change="first = false;second = false;third = false;" />
</div>

处理AngularJS中的单选按钮等复选框

3 个答案: