A
A
Alex2014-10-23 08:19:08
Angular
Alex, 2014-10-23 08:19:08

Tabs in angularjs, how to make a condition?

UPD.
Figured out how to implement.
Finished example:

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></p>
                    <p ng-show="showTab === $index"></p>
                </li>
            </ul>
            </article>
        </section>

Question removed pastebin.com/ZJacw6Er

Answer the question

In order to leave comments, you need to log in

4 answer(s)
A
Alex, 2014-10-23
@sensus

Updated question, solution provided =)

A
Alexander Sydorenko, 2014-10-23
@San40

Hello, do you want this?

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

??

M
Mikhail Osher, 2014-10-23
@miraage

Don't forget that it ng-repeatcreates a new scope , so the primitive will not end up in the parent's scope .
For such purposes, I use methods, a la data-ng-click="setTab($index)"or data-ng-click="setTab(item.id)".

R
Rustamka Vorontsov, 2014-10-23
@rmfordev

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question