angularjs 如何处理checkbox

来源:互联网 发布:淘宝商城半身裙 编辑:程序博客网 时间:2024/05/16 05:33

直接上程序代码:

index.html

<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

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) ;}} ;});

效果:


1 0
原创粉丝点击