In a set of checkboxes in angular.js, how to select one of them but not the others?
伊谢尔伦2017-05-15 17:06:00
<!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>
PHP中文网2017-05-15 17:06:00
ng-modelConsistency is required. Use value to control content.
<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`.
大家讲道理2017-05-15 17:06:00
The following code is just an idea. There are many problems. For example, I found that the list cannot be extracted and using ng-for is not feasible. .disabled requires you to adjust the style yourself.
<!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>