在初始加载期间遇到 ng 类问题

Having an issue with ng-class during initial load

本文关键字：遇到 ng 问题 加载      更新时间：2023-09-26

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

使用 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>

问题是，第一项永远不会设置为使用"selected"类，尽管驱动它的作用域变量确实设置正确。

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

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>

我的猜测是它在 ng 重复中的范围内存在问题。

尝试更改：

$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..."

尚未测试，但这是我遇到的一个常见问题，带有角度ng重复范围; 解决方案可能适合您。

相关文章：