在初始加载期间使用ng-class时出现问题

Question

我手头有一个非常简单的任务。创建一个列表，突出显示活动项。

使用ng-class并在作用域中设置当前选定的项在单击时起作用，但不是最初。

我在这里忽略了什么？这是数据。

$scope.adminTabs =  [{"name": "Agent"}, 
             {"name": "Agent Queue"},
             {"name": "Skills"}
             ]

下面是控制器中的单击以及初始值的设置：

$scope.adminTabs = adminInfo.adminTabs;
  //Default
    $scope.activeAdminTab = $scope.adminTabs[0].name;
    $scope.loadAdminTab = function(){
            $scope.activeAdminTab = this.tab.name;

    }

最后，ng-class指令本身在起作用

<ul>
                    <li data-ng-click="loadAdminTab()"
                        data-ng-repeat="tab in adminTabs"
                        data-ng-model = "admin.selectedTab" 
                        data-ng-class="tab.name == activeAdminTab ? 'selected' : '' ">{{tab.name}}</li>
                </ul>

问题是，第一项从未设置为使用“选定”类，尽管驱动它的作用域变量确实设置正确。

Answer 1

这不是一个答案，所以请不要接受它或投票支持它。之所以出现在这里，是因为我创建了一个显示代码工作的代码片段：

​

angular.module('MyModule', [])

.controller('MyController', function($scope) {

  $scope.adminTabs =  [{"name": "Agent"}, 
    {"name": "Agent Queue"},
    {"name": "Skills"}
    ];
  
  $scope.activeAdminTab = $scope.adminTabs[0].name;
  
  $scope.loadAdminTab = function(){
     $scope.activeAdminTab = this.tab.name;
  }
});

.selected {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  <ul>
    <li data-ng-click="loadAdminTab()"
        data-ng-repeat="tab in adminTabs"
        data-ng-model = "admin.selectedTab" 
        data-ng-class="tab.name == activeAdminTab ? 'selected' : '' ">{{tab.name}}</li>
  </ul>
</div>

​

Answer 2

我猜想这是一个在ng-repeat中的作用域的问题。

尝试更改：

$scope.activeAdminTab = $scope.adminTabs[0].name;

和

data-ng-class="tab.name == activeAdminTab..."

至：

$scope.obj = {};
$scope.obj.activeAdminTab = $scope.adminTabs[0].name;

和

data-ng-class="tab.name == obj.activeAdminTab..."

我还没有测试过，但这是我在使用angular ng-repeat作用域时遇到的一个常见问题；解决方案可能适合您。