angularjs 动态生成多个checkboxs,但只能选择一个
要求:
anjulajs 动态生成前端多个checkbox(复选框),但是只能选择一个
步骤:
1:创建一个controller,(我这里单独放一个js文件里面main.js)
var app=angular.module('myApp', []);
app.controller('PlayerController', ['$scope', function($scope) {
$scope.entities = [{
name: '第一个复选框测试1',
checked: false
}, {
name: '第一个复选框测试2',
checked: false
}, {
name: '第一个复选框测试3',
checked: false
}, {
name: '第一个复选框测试4',
checked: false
}
];
//前台选择后的一个交互事件(函数)
$scope.updateSelection = function(position, entities) {
angular.forEach(entities, function(subscription, index) {
if (position != index)
subscription.checked = false;
});
}
}]);
2:创建前台显示页面(我这里用index.html)
<!DOCTYPE html >
<html ng-app="myApp" >
<head>
<!--引入angualrs-->
<script type="text/javascript" src="js/angular.js"></script>
<!--引入前面写的控制器JS-->
<script type="text/javascript" src="js/main.js" ></script>
<title>ng-bind directive</title>
</head>
<body >
<div ng-controller="ChexkboxsTest">
<table>
<tr ng-repeat="subscription in entities">
<td>
<input type="checkbox" ng-model="subscription.checked" ng-click="updateSelection($index, entities)"/>{{subscription.name}}
</td>
</tr>
</table>
</div>
</body>
</html>
3:最终测试效果