angularjs 复选框

最新推荐文章于 2026-04-21 21:17:37 发布

原创最新推荐文章于 2026-04-21 21:17:37 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angularjs 复选框

收录于

angularjs 同时被 2 个专栏收录

1 篇文章

订阅专栏

复选框

1 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的用户选择功能，通过复选框来选择用户，并利用$scope更新所选用户的数组。文章详细展示了如何通过ng-click等指令处理用户的选择状态，并在数组中添加或移除相应的用户ID。

<label  ng-repeat="us in user.group_member">
    <input type="checkbox"  ng-model="not" vlaue="{{us.uid}}" class="groupUser"  name="{{us.user_name}}" ng-click="so($event,us.uid,us)" ng-checked="isSelecteds(us.uid)" >{{us.user_name}}
</label>

 $scope.isSelected = function(id){ 
                return 
 $scope.checkedr.indexOf(id)!=-1;
        };  
 $scope.selecteds=[];
 $scope.so=function($event,id,o){
        var checkbox = $event.target;
        var action = (checkbox.checked?'add':'remove');
        $scope.updateSelected(action,id,checkbox.name);
   }
   $scope.updateSelected = function(action,id,name){
         if(action == 'add' && $scope.selecteds.indexOf(id) == -1){
            $scope.selecteds.push(id);
         }else{
            // 删除时进行返回元素和指定元素不相等的元素
            $scope.selecteds=$scope.selecteds.filter(function(ele){
                 return ele != id;
            })
         }
         if(action == 'remove' && $scope.selecteds.indexOf(id)!=-1){
             var idx = $scope.selecteds.indexOf(id);
             $scope.selecteds.splice(idx,1);
         }
     }