Angularjs 处理CheckBox 处理要传输的数据

Angularjs中队CheckBox的处理:选取被选中的选项及内容,分辨选中后取消选项以及对后台数据的传输。

如下获取到要传输的数据,再进行下一步的异步处理,不做赘述。

1,HTML

<tr ng-repeat="item in totalmsg">
	<input type="checkbox" name="{{item.name}}"
       		ng-checked="isSelected(item.id)"
       		ng-click="updateSelection($event,item.id)"/>
	<td>{{item.id}}</td>
	<td>{{item.name}}</td>
</tr>

2,JS

 
$rootScope.selected = [];
$rootScope.selectedTags = [];
var updateSelected = function(action,id,name){
    if(action == 'add' && $rootScope.selected.indexOf(id) == -1){
        $rootScope.selected.push(id);
        $rootScope.selectedTags.push(name);
    }
    if(action == 'remove' && $rootScope.selected.indexOf(id)!=-1){
        var idx = $scope.selected.indexOf(id);
        $rootScope.selected.splice(idx,1);
        $rootScope.selectedTags.splice(idx,1);
    }
};

$scope.updateSelection = function($event, id){
    var checkbox = $event.target;
    var action = (checkbox.checked?'add':'remove');
    updateSelected(action,id,checkbox.name);
    console.log($rootScope.selected);
    console.log($rootScope.selectedTags);
};
$scope.isSelected = function(id){
    return $rootScope.selected.indexOf(id)>=0;
};
 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值