AngularJS：将元素设置为默认激活class

Question

我使用以下代码创建了一个自定义选项卡式元素：

<div class="row step">
    <div class="col-md-4 arrow active" ui-sref-active="active">
        <a ui-sref="dashboard.create.key_elements" ui-sref-opts="{ reload: true }">
            <span class="number">1</span>
            <span class="h5">Key Elements</span>
        </a>
    </div>
    <div class="col-md-4 arrow" ui-sref-active="active">
        <a ui-sref="dashboard.create.questions" ui-sref-opts="{ reload: true }">
            <span class="number">2</span>
            <span class="h5">Questions</span>
        </a>
    </div>
    <div class="col-md-4 arrow" ui-sref-active="active">
        <a ui-sref="dashboard.create.publish" ui-sref-opts="{ reload: true }">
            <span class="number">3</span>
            <span class="h5">Publish</span>
        </a>
    </div>
</div>

如您所见，我正在使用 ui-sref-active="active" 将 active 的 class 添加到单击时的元素。我的问题是当页面 first 加载时，让第一个元素显示 class 处于活动状态，因为目前它仅在单击项目时发生。我试过手动将 active 添加到第一个元素，但这似乎被忽略了。

Answer 1

问题是第一个路由dashboard.create.key_elements不是当前路由，所以ui-router将其禁用为"active"。

解决方案：

在 CSS 中添加另一个 class 例如"newclassname" 具有与 "active" class
将 ng-class 添加到以 $scope 中的变量为条件的第一个元素，然后 ng-单击其他元素以禁用它

在 JS 中：

$scope.firstActive = true;
$scope.changeFirst = function() {
      $scope.firstActive = false;
};

编辑：

更好的是，您可以在定义路由时简单地注入变量，而不是涉足 ng-click。例如。来自我自己的代码片段

.state('ordini', {
            url: '/ordini/:pdv',
            templateUrl: 'ordini/ordini.html',
            controller: 'OrdiniController',
            resolve : {
                CartValue: ['$rootScope', '$stateParams', 'CartService', function($rootScope, $stateParams, CartService){
                    return CartService.getCartValue($rootScope.user.MachCode, $stateParams.pdv);
                }]
            }

见documentation

AngularJS：将元素设置为默认激活class

AngularJS: Set element to class active by default

javascript

tabs

angularjs