全选不起作用，除非我选择一些东西

Select All doesn't work unless I select something

本文关键字：选择 非我 不起作用 全选      更新时间：2023-09-26

我正在使用AngularJS，处理对象

vm.getAllPermissions = function(category) {
    return vm.allPermissions[category];
};
vm.unselectAll = function(category, selectedPermissions) {
selectedPermissions = selectedPermissions === undefined ? []  :     selectedPermissions;
    var permissions = vm.getAllPermissions(category);
    for (var i = selectedPermissions.length - 1; i >= 0; i--) {
        if (permissions.indexOf(selectedPermissions[i]) > -1) {
            selectedPermissions.splice(i, 1);
        }
    }
};
vm.selectAll = function(category, selectedPermissions) {
selectedPermissions = selectedPermissions === undefined ? []  : selectedPermissions;
    vm.unselectAll(category, selectedPermissions);
    var permissions = vm.getAllPermissions(category);
    for (var i = permissions.length - 1; i >= 0; i--) {
        selectedPermissions.push(permissions[i]);
    }
};

和权限是一个数组。vm.unselectAll工作正常。如果用户选择了至少一个权限，则vm.selectAll工作，但如果所有复选框都为空，则select all将不选择任何内容。

控制台错误是

TypeError: Cannot read property 'length' of undefined
    at RolesController.vm.unselectAll (roles.controller.js:95)
    at RolesController.vm.selectAll (roles.controller.js:103)
    at fn (eval at compile (angular.js:13628), <anonymous>:4:652)
    at b (angular.js:14610)
    at e (angular.js:24071)
    at n.$eval (angular.js:16359)
    at n.$apply (angular.js:16459)
    at HTMLButtonElement.<anonymous> (angular.js:24076)
    at Pf (angular.js:3374)
    at HTMLButtonElement.d (angular.js:3362)

编辑，html 

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="vm.cancel()"><span aria-hidden="true"><em class="fa fa-times resizable"></em></span></button>
    <h4 class="modal-title">{{vm.title}}</h4>
</div>
<div class="modal-body">
    <form name='form' class='form-horizontal' role="form" autocomplete="off" novalidate>
        <fieldset ng-disabled="vm.displaying">
            <div class="form-group" ng-show="vm.editing">
                <label class='control-label col-md-2' for='id_id'>{{'ID' | translate}}</label>
                <div class='col-md-2'>
                    <input type="text" class="form-control" id ='id_id' ng-model="vm.data.id" disabled />
                </div>
            </div>
            <div class="form-group">
                <label class='control-label col-md-2' for='id_name'>{{'NAME' | translate}}</label>
                <div class='col-md-4'> 
                    <input type="text" class="form-control" id ='id_name' ng-model="vm.data.name" required autofocus/>
                </div>               
            </div>
            <div class="form-group">
                <label class='control-label col-md-3' for='id_name'>{{'PERMISSIONS' | translate}} :</label>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <uib-tabset type="tabs" vertical="false" justified="false">       
                        <uib-tab class="nav nav-tabs" ng-repeat="category in vm.parent.getPermissionsCategories()" >
                           <uib-tab-heading>{{vm.parent.getPermissionCategoryTitle(category)}}</uib-tab-heading>
                                <table class="table-striped table-bordered table-condensed">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <button class="btn btn-default btn-flat btn-sm" ng-click="vm.parent.selectAll(category, vm.data.permissions)">{{'ACTION_SELECT_ALL' | translate}}</button>
                                            </td>
                                            <td>
                                                <button class="btn btn-default btn-flat btn-sm" ng-click="vm.parent.unselectAll(category, vm.data.permissions)">{{'ACTION_UNSELECT_ALL' | translate}}</button>
                                            </td>
                                        </tr>
                             <!--        .parent for ng-repeat
                                    .parent.parent for ng-if -->
                                        <tr ng-if="$index%3==0" ng-repeat="permission in vm.parent.getAllPermissions(category)">
                                            <td ng-repeat="i in [0,1,2]" class="col-xs-2">
                                                <span ng-if="vm.parent.getPermission(category,$parent.$index+i)">
                                                    <input type="checkbox" checklist-model="vm.data.permissions" checklist-value="vm.parent.getPermission(category,$parent.$parent.$index+i)">
                                                    {{vm.parent.getPermissionTitle(category,$parent.$parent.$index+i)}}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                        </uib-tab>            
                    </uib-tabset>            
                </div>
            </div>
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <div class="text-center">
        <button class="btn btn-success btn-sm" type='submit' ng-click="vm.submit()" ng-if="!vm.displaying" ng-disabled='form.$invalid'>{{vm.actionTitle}}</button>
        <button class="btn btn-default btn-sm" ng-click="vm.cancel()">{{vm.closeTitle}}</button>
    </div>
</div>

console.log(selectedPermissions);

的输出
[]
roles.controller.js:108 ["security:role:query"]
roles.controller.js:108 ["security:role:query", "security:role:delete"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage", "security:user:query"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage", "security:user:query", "security:user:delete"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage", "security:user:query", "security:user:delete", "security:user:update"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage", "security:user:query", "security:user:delete", "security:user:update", "security:user:create"]
roles.controller.js:108 ["security:role:query", "security:role:delete", "security:role:update", "security:role:create", "security:role:read", "security:role:manage", "security:user:query", "security:user:delete", "security:user:update", "security:user:create", "security:user:read"]

我认为这是一个html问题因为我调试了selectall所有的数据都在那里，正常工作，我认为表格单元格没有被填充

希望这将避免重复的权限推送和选择功能

vm.selectAll = function(category, selectedPermissions) {
    var permissions = vm.getAllPermissions(category);
    for (var i = permissions.length - 1; i >= 0; i--) {
        if(selectedPermissions.indexOf(permissions[i])<0) {
           selectedPermissions.push(permissions[i]);
        }
    }
};

基于行号和计数selectedPermissions是未定义的，试试这个。

一旦你得到了工作，你可以做一些其他的事情来减少复杂性和代码行数。

vm.getAllPermissions = function(category) {
    return vm.allPermissions[category];
};
vm.unselectAll = function(category, selectedPermissions) {
    var permissions = vm.getAllPermissions(category);
    for (var i = selectedPermissions.length - 1; i >= 0; i--) {
        if (permissions.indexOf(selectedPermissions[i]) > -1) {
            selectedPermissions.splice(i, 1);
        }
    }
};
vm.selectAll = function(category, selectedPermissions) {
    selectedPermissions = selectedPermissions === undefined ? []  : selectedPermissions; //This is the null/undefined check you're missing
    vm.unselectAll(category, selectedPermissions);
    var permissions = vm.getAllPermissions(category);
    for (var i = permissions.length - 1; i >= 0; i--) {
        selectedPermissions.push(permissions[i]);
    }
};

这应该可以修复它:

// This should be initialized elsewhere in the controller for this to work
var selectedPermissions = [];

或者，您可以在调用selectAll函数之前检查此值:

//possible other actions performed
selectedPermissions = selectedPermissions || []; //This should be present before every call made to selectAll
vm.selectAll(category, selectedPermissions);
vm.selectAll = function(category, selectedPermissions) {
    selectedPermissions = []; //Since you are aiming to empty selected permissions
    var permissions = vm.getAllPermissions(category);
    for (var i = permissions.length - 1; i >= 0; i--) {
        selectedPermissions.push(permissions[i]);
    }
};

除非selectedPermissions中有permissions中没有的权限。在这种情况下，mareeskannan的回答更合适。

我相信你可以保持你的函数是偶数。这里的关键是确保将selectedPermissions初始化为空数组。如果它的初始值没有定义，那么它将按值传递，而不是按引用传递。

或者，您可以让selectAll返回选择的权限:

vm.selectAll = function(category, selectedPermissions) {
    if (selectedPermissions) {
       vm.unselectAll(category, selectedPermissions);
    } else {
        selectedPermissions = []; //Since you are aiming to empty selected permissions
    }
    var permissions = vm.getAllPermissions(category);
    for (var i = permissions.length - 1; i >= 0; i--) {
        selectedPermissions.push(permissions[i]);
    }
    return selectedPermissions;
};
相关文章：