时间戳

首页 > 解决方案 > Angularjs - 数组项依赖属性未更新

angularjs - Angularjs - 数组项依赖属性未更新

问题描述

我有这个范围数组变量

$scope.menuItems = [
        {
            name: 'Login',
            url:'#/login',
            isAvailable: true
        },
        {
            name: 'Register',
            url: '#/register',
            isAvailable: $scope.global.roleId == null
        },
        {
            name: 'My Restaurants',
            url: '#/myrestaurants',
            isAvailable: $scope.global.roleId == constants.OWNER_USER_ROLE_ID
        },
        {
            name: 'Create Restaurant',
            url: '#/createrestaurant',
            isAvailable: $scope.global.roleId == constants.OWNER_USER_ROLE_ID
        },
        {
            name: 'Logout',
            url: '#/logout',
            isAvailable: $scope.global.roleId != null
        }
    ];

此对象依赖于另一个范围变量$scope.global.roleId

我正在像这样从这个数组加载菜单

<ul class="nav navbar-nav">
    <li ng-repeat="n in menuItems | filter:{isAvailable:true}">
        <a href="{{n.url}}">{{n.name}}</a>
    </li>                      
</ul>

我希望它在更新时自动更新菜单$scope.global.roleId。

需要注意的是，我正在$scope.global.roleId从子控制器更新此变量，并且此字段正在正确更新，但它不影响数组字段isAvailable。

我检查了变量$scope.global.roleId和$scope.menuItems日志，并且$scope.global.roleId每次都正确更新，但不是$scope.menuItems.isAvailable依赖于前者的字段

我做错了什么或期待什么？实现这一目标的正确方法是什么？

标签： angularjsglobal-variables

解决方案

像这样实现的，将变量转换为属性

{
    name: 'My Restaurants',
    url: '#/myrestaurants',
    get isAvailable() {
        return $scope.global.roleId == constants.OWNER_USER_ROLE_ID;
    }
},

推荐阅读