您的位置：首页 > Web前端 > AngularJS

使用angular如何实现让checkbox单选，但只能选中一个

2018-03-06 23:31 543 查看

步骤：
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) {
angular.forEach($scope.entities, function(subscription, index) {
if (position != index)
subscription.checked = false;
});
}
}]);2：创建HTML文档显示前端页面<!DOCTYPE html >
<html ng-app="myApp" >
<head>

<script type="text/javascript" src="js/angular.js"></script>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularJS

相关文章推荐

新的分享

章节导航