Табы на angularjs, как делать условие ?

Question

[Алекс]

UPD.
Разобрался как реализовать.
Готовый пример:

andrApp.controller('tabsMenu', ['$scope',
                function tabsMenu($scope) {
                    $scope.tab = 0;
                    $scope.settingsMenu = [
                        {
                            id: 0,
                            name: 'Фотоальбом',
                            desc: 'Загрузить/Удалить'
                        },
                        {
                            id: 1,
                            name: 'Я',
                            desc: 'Основные настройки'
                        },
                        {
                            id: 2,
                            name: 'Я путешественник',
                            desc: 'Настройка путешествий'
                        }
                    ];

                    $scope.setTab = function(id, $index) {
                        $scope.showTab = id;
                    };
            }])

<section>
            <article ng-controller="tabsMenu" class="ng-tab">
            <ul>
                <li ng-repeat="item in settingsMenu" ng-class="{active:showTab === $index}" ng-click="setTab(item.id, $index)">
                    <p>[[item.name]]</p>
                    <p ng-show="showTab === $index">[[item.desc]]</p>
                </li>
            </ul>
            </article>
        </section>

Вопрос убрал подальше pastebin.com/ZJacw6Er

Answer 1

[Алекс]

Обновил вопрос, решение предоставил =)

Answer 2

[Alexander Sydorenko]

Здравствуйте, Вы это хотели?

<div ng-controller="tabsMenu" ng-init="tab = 3; settingsMenu" class="ng-tab">
    <ul>
        <li ng-repeat="item in settingsMenu" ng-class="{active:tab === settingsMenu[$index].id }" 
             ng-click="tab = settingsMenu[$index].id">
            <p>{{item.name}}</p>
            <p ng-show="tab === $index">{{ item.desc }}</p>
        </li>
    </ul>
</div>

??

Comments

[Алекс]

Вероятно, сейчас протестирую. Но похоже что оно.
Пора спать идти)

[Алекс]

@Alexander Sydorenko Единственное различие от "ручного режима", при клике на другой таб, предыдущий остается активен. Почему так происходит, не просветите?

[Alexander Sydorenko]

судя по всему с индексом не получится определять активность класса..
можно попробовать так

<li ng-repeat="item in settingsMenu" ng-class="{active:tab === item.id }" 
             ng-click="tab = item.id">
            <p>{{item.name}}</p>
            <p ng-show="tab === item.id">{{ item.desc }}</p>
</li>

[Алекс]

@San40: Пробовал, та же песня.

[Алекс]

@San40: Собственно на этом я и застрял)

[Alexander Sydorenko]

Можно попробовать расширить контроллер на поле active, и метод setTab(item.id). В ng-class забиндить item.active, при выборе табы на ng-click вызвать метод контроллера setTab(item.id), в котором установить tab = item.id; и дополнительно пробежать по коллекции $scope.settingsMenu и присвоить item.active = (item.id === tab) ? 'active' : '';

как то так

andrApp.controller('tabsMenu', ['$scope',
                function tabsMenu($scope) {
                    $scope.setTab = function(id) {
                        $scope.tab = id;
                        for(item in $scope.settingsMenu) {
                            item.active = (item.id === tab) ? 'active' : '';
                        }
                    }
                    
                    $scope.tab = 0;
                    $scope.settingsMenu = [
                        {
                            id: 0,
                            active:'active',
                            name: 'Фотоальбом',
                            desc: 'Загрузить/Удалить'
                        },
                        {
                            id: 1,
                            active:'',
                            name: 'Я',
                            desc: 'Основные настройки'
                        },
                        {
                            id: 2,
                            active:'',
                            name: 'Я путешественник',
                            desc: 'Настройка путешествий'
                        },
                    ];
            }]);

И тогда вывод будет как то так

<li ng-repeat="item in settingsMenu" ng-class="{item.active}" 
             ng-click="setTab(item.id)">
            <p>{{item.name}}</p>
            <p ng-show="{item.active.length > 0}">{{ item.desc }}</p>
</li>

Answer 3

[Mikhail Osher]

Не забывайте о том, что ng-repeat создает новый scope, поэтому примитив не попадет в вышестоящий scope.
Я в таких целях использую методы, а-ля data-ng-click="setTab($index)"или data-ng-click="setTab(item.id)".

Answer 4

[Рустамка Воронцов]

<div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>

Comments

[Алекс]

У меня немного другая задача.
Если прописывать вручную ng-show="tab === 1", ng-show="tab === 2, ng-show="tab === 3", то понятно что будет работать. Только зачем нам писать руками? И зачем тогда делать репит.

Суть то - при клике отобразить нужный тег P, который может находится где угодно.
В ручном режиме все работает.