首页 > Web开发 > 详细

angularjs 如何处理checkbox

时间：2017-04-27 16:20:26 阅读：224 评论：0 收藏：0 [点我收藏+]

标签：ref 程序代码技术 hit click dex value 分享 bsp

直接上程序代码：

index.html

[html] view plain copy

<div>
<div ng-repeat="color in colors">
<input type="checkbox" ng-checked="isChecked(color.id)"
ng-click="updateSelection($event,color.id)" />{{color.name}}
</div>
</div>
<div>
Selected : {{selected}}
</div>

controller.js

[javascript] view plain copy

psmsApp.controller("vipApplyEditCtrl", function($scope) {
$scope.colors = [
{id : 1, name : ‘black‘},
{id : 2, name : ‘red‘},
{id : 3, name : ‘blue‘},
{id : 4, name : ‘yellow‘},
{id : 5, name : ‘green‘},
{id : 6, name : ‘white‘}
] ;
$scope.selected = [] ;
$scope.isChecked = function(id){
return $scope.selected.indexOf(id) >= 0 ;
} ;
$scope.updateSelection = function($event,id){
var checkbox = $event.target ;
var checked = checkbox.checked ;
if(checked){
$scope.selected.push(id) ;
}else{
var idx = $scope.selected.indexOf(id) ;
$scope.selected.splice(idx,1) ;
}
} ;
});

效果：

技术分享

angularjs 如何处理checkbox

标签：ref 程序代码技术 hit click dex value 分享 bsp

原文地址：http://www.cnblogs.com/jiaxiaohua/p/6774725.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！