Ng-click и ng-show не работают с динамическим контентом (угловой)

Question

Ng-click и ng-show не работают с динамическим контентом (угловой)

5

Почему Ng-click и ng-show не работают с динамическим контентом, а если я пытаюсь переключить статические вкладки, все работает нормально? Что мне нужно сделать, чтобы я мог нажимать на вкладки профилей профилей? Как добиться желаемого эффекта при минимальном значении кода? Надеюсь, вы, ребята, можете мне помочь.

<div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li>
                <li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li>
                <li class="" ng-repeat="p in profiles"><a ng-click="tab=p.uid" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>
            </ul>

            <div class="tab-content">
                <!-- subscriber tab -->
                <div class="tab-pane active" ng-show="tab==1" ng-init="tab=1">
                    <div class="row">
                        <div class="col-xs-12">
                            sssssssssssssssssssssssssssssssss
                        </div>
                    </div>
                </div>
                <!-- subscriber tab -->

                <!-- devices tab -->
                <div class="tab-pane active" ng-show="tab==2">
                    <div class="row">
                        <div class="col-xs-12">
                                dddddddddddddddddddddddddd
                        </div><!-- /.row -->
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-pane -->
                <!-- devices tab -->

                <!-- profiles tab -->
                <div class="tab-pane active" ng-repeat="p in profiles" ng-show="tab==p.uid">
                    <div class="row">
                        <div class="col-xs-12">
                            ppppppppppppppppp
                        </div><!-- /.row -->
                    </div><!-- /.tab-pane -->
                </div><!-- /.tab-pane -->
                <!-- profiles tab -->
            </div><!-- /.tab-content -->
</div>

Скажем, например, что у меня есть профиль:

$scope.profiles=[
    {
        "Name" : "Jhonny",
        "uid" : "00000"
    },
    {
        "Name" : "Ken",
        "uid" : "00001"
    },
    {
        "Name" : "Zelda",
        "uid" : "00002"
    }]

Заранее благодарю вас!

Valor_ 09 нояб. 2015, в 11:25

Источник

0

Где ваши коды JavaScript?
Kamuran Sönecek 09 нояб. 2015, в 09:29
0

У меня его нет, по крайней мере, я не знаю, нужен ли он для этой части ... Я добавил пример профиля, который генерируется контроллером.
Valor_ 09 нояб. 2015, в 09:36
0

И, пожалуйста, не просто не голосуйте. Дайте мне знать, где проблема, и я исправлю свой вопрос.
Valor_ 09 нояб. 2015, в 09:44

Показать ещё 1 комментарий

Теги:

javascript

twitter-bootstrap

html

angularjs

1 ответ

Ещё вопросы

У меня его нет, по крайней мере, я не знаю, нужен ли он для этой части ... Я добавил пример профиля, который генерируется контроллером.
И, пожалуйста, не просто не голосуйте. Дайте мне знать, где проблема, и я исправлю свой вопрос.

Kamuran Sönecek · Accepted Answer · 2015-11-09T13-59-00.000Z

Задайте функцию для вашей директивы ng-click.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
     <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">

                    <li class="" ng-repeat="p in pies"><a ng-click="setTab(p)" >{{p.name}}</a></li>
                </ul>

                <div class="tab-content">

                    <!-- profiles tab -->
                    <div class="tab-pane active" ng-repeat="p in pies" ng-show="tab==p.id">
                        <div class="row">
                            <div class="col-xs-12">
                                {{p.name}}
                            </div><!-- /.row -->
                        </div><!-- /.tab-pane -->
                    </div><!-- /.tab-pane -->
                    <!-- profiles tab -->
                </div><!-- /.tab-content -->
    </div>
    </div>
    </div>
</div>

Javascript:

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.tab = 1;
    $scope.setTab = function(p){
        $scope.tab = p.id;
    }
    $scope. pies = [
        {name:"kakaolu",id:1},
        {name:"kestane",id:2},
        {name:"fisne",id:3},
    ];
}

Jsfiddle

Хорошая работа, сэр! Ваше решение сработало для меня. Спасибо