使用angularjs将复选框设置为选中时导致的错误

Error caused when set checkboxes as checked using angularjs

本文关键字:错误 angularjs 复选框 设置 使用      更新时间:2023-09-26

这是html:

<span ng-repeat="category in categories">
      <label class="checkbox-inline" for="{{category.id}}">
        <input type="checkbox" ng-checked="check(category.id)" ng-click="saveRoleMenu($event,category.id)" name="group" id="{{category.id}}" />
        {{category.name}}
      </label>
</span>

this is my controller:

//get all the menus
authorityService.getMenus().then(function(response) {
    $scope.categories = response.data.data; //get all the menus success
})
//get the user's menus
var roleId = sessionStorage.getItem("roleId");
authorityService.getMenusByRoleId(roleId).then(function(response) {
    $scope.userMenu = response.data.data; //get the user's menu success
})
$scope.saveRoleMenu = function($event, id) {
    var checkbox = $event.target;
    if (checkbox.checked) {
        var roleId = $location.search().id;
        authorityService.saveRoleMenu(roleId, id).then(function(response) {
            if (response.data.code == 0) {
                alert("success!");
            }
        })
    }
}
$scope.check = function(value) {
    //error caused here
    for (var i = 0; i < $scope.userMenu.length; i++) {
        if(value == $scope.userMenu[i].id){
            return true;
        }else{
            return false;
        }
    }
}

我想设置复选框选中,如果在$scope.userMenu的值,但在检查功能,导致错误"无法读取属性'长度'的未定义",这个错误的原因是什么?

Cannot read property 'length' of undefined

表示$scope.userMenu未定义。定义范围。

$scope.userMenu = [];
var roleId = sessionStorage.getItem("roleId");

这是因为你的userMenu是从API加载的,check函数在加载之前执行。

在顶部定义userMenu,像这样-

$scope.userMenu = [];

这将阻止check抛出错误。一旦菜单从API视图加载,它将重新渲染。