Question

对于特定的下拉菜单，我想在我的应用中根据布尔显示不同的选项。我设置了每个东西和SORTA的工作，但DOM没有正确更新以显示下拉列表中的值。我用来检查代码的console.logs输出我的变量的更正值，当我刷新页面时，下拉列表就可以了。

$scope.login = function () {
    var loginUrl = url;

    $server.post(loginUrl, $scope.user)
        .then(function(response) {
            var data = response.data;

            if(data.status == 'OK') {
                //some things here that work fine
                $scope.getRights();
            } else {
                $scope.user.password = '';
            }
        }
};

$scope.getRights = function() {
    console.log("yo");
    $scope.boolA = false;
    $scope.boolB = false;
    $scope.boolC = false;
    $scope.boolD = false;

    $scope.permissions.forEach(function (right) {
        console.log(right);
        switch(right) {
            case "A":
                $scope.boolA = true;
                break;
            case "B":
                $scope.boolB = true;
                break;
            case "C":
                $scope.boolC = true;
                break;
            case "D":
                $scope.boolD = true;
                break;
        }
    });
    console.log($scope.boolA + " " + $scope.boolB + " " + $scope.boolC + " " + $scope.boolD);
};

使用匹配的html，正确的控制器在上面的<div>中定义。

<ul class="dropdown-menu" uib-dropdown-menu role="menu">
    <li role="menuitem" ng-show="boolA"><a href="#/start">
        Option A
    </a></li>
    <li role="menuitem" ng-show="boolB"><a href>
        Option B
    </a></li>
    <li role="menuitem" ng-show="boolC"><a href>
        Option C
    </a></li>
    <li role="menuitem" ng-show="boolD"><a href>
        Option D
    </a></li>
</ul>

$ scope.permissions中的json是["A","B","D"]

我的console.log输出：true true false true

如果我在浏览器中检查$ scope变量，则不会设置它们，并且下拉选项都会激活ng-hide。当我刷新页面时，它们显示在$ scope检查器中，我的下拉列表具有正确的值。所以它看起来像是同步/异步问题，或者我使用不正确的路径设置这些变量。

简单地让它们成为全球性并不会改变任何事情。 A＆＃34;简单＆＃34;修复将成功登录后强制重新加载，但这并不像＆＃34;角度方式＆＃34;。我很确定我在这里只是让初学者犯了错误。谁能帮助我找出这个错误所在？

Answer 1

您不能简单地转换您的＆＃34;权限＆＃34;而不是这样做。数组进入菜单项的列表？这样，用户就无法在html中看到选项。

$scope.getRights = function() {
$scope.permissions = ["A", "B", "D"];
$scope.menuItems = [];
$scope.permissions.forEach(function(val) {
  $scope.menuItems.push({
    title: val
  });
});

}

<ul role="menu">
<li role="menuitem" ng-repeat="item in menuItems">
  <a>Option {{item.title}}</a>
</li>

检查this plunkr

更新

在这种情况下，由于与this post相关的问题建议使用$ apply（），您的DOM很可能无法更新：

$scope.$apply(function(){
        $scope.boolA = false;
    });

另外，请务必查看Danny Bullis评论：

使用$ q.defer（）;返回的对象允许您在异步方法完成后调用.resolve（）或.reject（）方法。在解析异步方法后，$ q.defer（）对象的resolve和reject方法都在内部调用$ digest。 $ digest告诉angular重新评估您的$ scope属性，这将执行您正在寻找的内容。这是一种更好的做法。如果你不需要，并且有更好的内置角度机制来处理这个问题，请避免调用$ apply（）。

Angular中使用ng-show的布尔变量，最初未设置

1 个答案:

更新