angular.js中一组复选框，怎么实现选中其中一个，其他不能选？
光阴似箭催人老，日月如移越少年。
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p ng-controller="demo"> <p>当前值： {{hobby}}</p> <ul> <li ng-repeat="i in [1,2,3]"> <label>吃：</label> <input type="checkbox" ng-click="check(i)" ng-disabled="hobby == i" ng-checked="hobby == i" /> </li> </ul> </p> <script src="http://cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script> <script> angular.module('app', []).controller('demo', ['$scope', function ($scope) { $scope.hobby = 1; $scope.check = function (i) { $scope.hobby = i; } }]); </script> </body> </html>
ng-modelLa cohérence est requise. Utilisez la valeur pour contrôler le contenu.
ng-model
<script> angular.module('radioExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.color = { name: 'blue' }; $scope.specialValue = { "id": "12345", "value": "green" }; }]); </script> <form name="myForm" ng-controller="ExampleController"> <label> <input type="radio" ng-model="color.name" value="red"> Red </label><br/> <label> <input type="radio" ng-model="color.name" ng-value="specialValue"> Green </label><br/> <label> <input type="radio" ng-model="color.name" value="blue"> Blue </label><br/> <tt>color = {{color.name | json}}</tt><br/> </form> Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
Le code suivant n'est qu'une idée. Il y a de nombreux problèmes, par exemple, j'ai trouvé que la liste ne peut pas être extraite et que l'utilisation de ng-for n'est pas réalisable. .disabled vous oblige à ajuster le style vous-même.
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <p ng-controller="demo"> <p>当前值： {{hobby}}</p> <ul> <li> <label>吃：</label> <input type="checkbox" ng-true-value="1" ng-model="hobby" ng-class="{disabled: hobby}" ng-change="handleCheckbox($event)" /> </li> <li> <label>睡：</label> <input type="checkbox" ng-true-value="2" ng-model="hobby" ng-class="{disabled: hobby}" ng-change="handleCheckbox($event)" /> </li> </ul> </p> <script src="//cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script> <script> angular.module('app', []) .controller('demo', ['$scope', function ($scope) { $scope.hobby = false; }]); </script> </body> </html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
ng-modelLa cohérence est requise. Utilisez la valeur pour contrôler le contenu.Le code suivant n'est qu'une idée. Il y a de nombreux problèmes, par exemple, j'ai trouvé que la liste ne peut pas être extraite et que l'utilisation de ng-for n'est pas réalisable. .disabled vous oblige à ajuster le style vous-même.