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>

问题是，第一项永远不会设置为使用＆＃34;选择＆＃34; class，虽然驱动它的范围变量确实设置正确。

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

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

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

2 个答案: