将默认选项卡设置为 Angular.js 个选项卡

Question

我有一个 Angular.js 组件，它有一个选项卡列表。单击选项卡时，我会为其分配一个 ng-class（活动），因此它会突出显示。这工作正常，但我也希望第一个选项卡在用户首次加载页面时成为默认活动选项卡，但目前在我加载页面时没有突出显示任何内容。

这是我的组件：

'use strict';

angular.module('menuBar').component('menuBar', {
    templateUrl: 'menu-bar/menu-bar.template.html',
    controller: function menuBarController() {
        this.menus = [
            {
                name: 'Tab1'
            }, {
                name: 'Tab2'
            }, {
                name: 'Tab3'
            }, {
                name: 'Tab4'
            }, {
                name: 'Tab5'
            }
        ];

        this.tab = this.menus[0].name;

        this.setTab = function (tabId) {
            this.tab = tabId;
        }

        this.isSet = function (tabId) {
            return this.tab === tabId;
        }
    }
});

这是我的 html 模板：

<div class="navbar navbar-inverse navbar-collapse">
    <div class="container">   
        <ul class="nav nav-tabs">
            <li ng-repeat="menu in $ctrl.menus" ng-class="{active:tab.isSet(menu.name)}">
                <a href ng-click="tab.setTab(menu.name)">{{menu.name}}</a>
            </li>
        </ul>  
    </div>
</div>

我尝试设置默认选项卡的这一行可能有问题？

this.tab = this.menus[0].name;

更新：添加了 Plunker

Live preview here

Answer 1

您可以使用 orderBy:

Function: A getter function. This function will be called with each item as argument and the return value will be used for sorting.

我不确定语法，因为我还没有使用过组件，但其中有一些：

<div class="navbar navbar-inverse navbar-collapse">
    <div class="container">   
        <ul class="nav nav-tabs">
            <li ng-repeat="menu in $ctrl.menus | orderBy: $ctrl.isSet(tab.id)" ng-class="{active:tab.isSet(menu.name)}">
                <a href ng-click="tab.setTab(menu.name)">{{menu.name}}</a>
            </li>
        </ul>  
    </div>
</div>

Answer 2

 <div class="navbar navbar-inverse navbar-collapse">
<div class="container">   
    <ul class="nav nav-tabs">
        <li ng-repeat="menu in $ctrl.menus" ng-class="     active:menu.name==$ctrl.tab}">
            <a href ng-click="$ctrl.setTab(menu.name)">{{menu.name}}</a>
        </li>
    </ul>  
</div>

将默认选项卡设置为 Angular.js 个选项卡

Set default tab to Angular.js tabs

javascript

html

angularjs

tabs

ng-class

更新：添加了 Plunker