Установить вкладку по умолчанию на вкладки Angular.js

У меня есть компонент 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;

Обновление: добавлен плунжер

Предварительный просмотр здесь


person leota    schedule 30.06.2016    source источник


Ответы (2)


Вы можете использовать orderBy:

Функция: геттерная функция. Эта функция будет вызываться с каждым элементом в качестве аргумента, а возвращаемое значение будет использоваться для сортировки.

Я не уверен в синтаксисе, так как еще не использовал компоненты, но что-то между строк:

<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>
person Muli Yulzary    schedule 30.06.2016
comment
Это только отсортирует мои вкладки. Он не назначает «активный» класс первому - person leota; 30.06.2016

person    schedule
comment
Пожалуйста, поделитесь plunker для репликации проблемы. - person Prianca; 01.07.2016
comment
Я исправил эту проблему, которую вы видите здесь. plnkr.co/edit/JYpzKoTfKgX8SND1Hwcp?p=preview - person Prianca; 01.07.2016
comment
Ваш код работает, а мой нет. Я не понимаю, какие изменения вы внесли. Не могли бы вы изменить мой плункер? - person leota; 01.07.2016
comment
‹div class=navbar navbar-inverse navbar-collapse› ‹div class=container› ‹!-- строка комментариев к изменениям --› ‹!-- ng-class={active:menu.name==$ctrl.tab} --› ‹!--‹a href ng-click=$ctrl.setTab(menu.name)›--› ‹ul class=nav nav-tabs› ‹li ng-repeat=menu в $ctrl.menus ng- class={active:menu.name==$ctrl.tab}› ‹a href ng-click=$ctrl.setTab(menu.name)›{{menu.name}}‹/a› ‹/li› ‹/ ул› ‹/дел› ‹/дел› - person Prianca; 01.07.2016
comment
Дасссс, спасибо большое! Если вы обновите свой ответ, я могу принять его - person leota; 01.07.2016
comment
Я обновил код. попробуйте запустить это.plnkr.co/edit/JdmV9j?p=preview - person Prianca; 01.07.2016
comment
О, на самом деле первая вкладка всегда остается активной, даже когда я выбираю другие. - person leota; 01.07.2016
comment
сделайте это ‹a href ng-click=$ctrl.setTab(menu.name)›{{menu.name}}‹/a› - person Prianca; 01.07.2016
comment
Да, гениально, это работает. Пожалуйста, отредактируйте свой ответ с этими изменениями, чтобы я мог дать вам баллы - person leota; 01.07.2016