Angularjs - Как показать по умолчанию первой вкладке аккордеона в нг-повторе

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-hide="showCompAcc" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

Это фрагмент аккордеона с нг-повтор data.Currently Он показывает все вкладки. То, что я хочу по умолчанию, должно показывать только открытую первую вкладку и щелкнуть другую вкладку, чтобы отобразить другие данные вкладки и скрыть данные вкладки по умолчанию.

источник

2017-01-31 Mohammed

Вы можете добавить 'нг-класс = :: { 'нг скрытие': $ индекс> 0}' - Это добавит 'класс нг-hide' на каждой вкладке, которая не первый (Index == 0). Вы также можете сделать 'ng-class = :: {'ng-hide': $ index}' (сокращенная версия) –

Будет здорово, если вы можете предоставить фрагмент. Я приложил рабочий фрагмент выше. @AlonEitan – Mohammed

Я добавил полный пример –

Вы можете использовать UIB-гармошку, представленную угловой ш самозагрузки

Angular ui accordion

$scope.groups = [ 
    { 
     "Name" : "Alfreds Futterkiste", 
     "Country" : "Germany", 
     "open" : true 
    }, 
    { 
     "Name" : "Berglunds snabbköp", 
     "Country" : "Sweden", 
     "open": false 
    }, 
    { 
     "Name" : "Centro comercial Moctezuma", 
     "Country" : "Mexico", 
     "open" : false 
    }, 
    { 
     "Name" : "Ernst Handel", 
     "Country" : "Austria", 
     "open" : false 
    } 
    ]

HTML

<uib-accordion close-others="true"> 
    <div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open"> 

    {{group.Country}} 
    </div> 
    </uib-accordion>

Вот plunker для этого. Plunker

Проверьте это

источник

2017-01-31 14:34:29

Он показывает эту ошибку, https://docs.angularjs.org/error/$injector/unpr?p0=$$isDocumentHiddenProvider%20%3C-%20$$isDocumentHidden%20%3C-%20$$animateQueue%20 % 3C-% 20 $ анимировать% 20% 3C-% 20 $ компилировать% 20% 3C-% 20 $$ animateQueue. @nishantagarwal – Mohammed

@Mohammed Он отлично работает в плункер. Похоже, что он не может решить проблему с анимацией. Эта ошибка находится в плункере или в вашем коде? –

Теперь он работает нормально, за исключением того, что по умолчанию открыта первая вкладка. @nishantagarwal – Mohammed

Вы можете добавить ng-class=::{'ng-hide': $index > 0} к телу каждого тега.

Это добавит ng-hide класса (это в основном CSS с display: none;) для каждого ушка, которое не является первым (индексом == 0) - Вы можете также сделать ng-class=::{'ng-hide': $index} (стенографии версии).

Я также добавил ng-init="showCompAcc = $index > 0", который правильно установит флаг showCompAcc для каждой вкладки, когда вы нажмете на нее.

:: является одноразовой привязкой для обеспечения того, чтобы он устанавливал класс так же, как и визуализацию шаблона, и не возвращал класс в каждый цикл дайджеста.

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records" > 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="showCompAcc=!showCompAcc" showtab="">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-hide="showCompAcc" ng-init="showCompAcc = $index > 0" ng-class="::{'ng-hide': $index}" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

Если вы хотите, чтобы скрыть текущую открытую вкладку при щелчке на другой вкладке вы можете сделать следующее:

var app = angular.module("myApp2", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.active = {record: 0}; 
 
    $scope.records = [ 
 
    { 
 
     "Name" : "Alfreds Futterkiste", 
 
     "Country" : "Germany" 
 
    }, 
 
    { 
 
     "Name" : "Berglunds snabbköp", 
 
     "Country" : "Sweden" 
 
    }, 
 
    { 
 
     "Name" : "Centro comercial Moctezuma", 
 
     "Country" : "Mexico" 
 
    }, 
 
    { 
 
     "Name" : "Ernst Handel", 
 
     "Country" : "Austria" 
 
    } 
 
    ] 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp2" ng-controller="myCtrl"> 
 

 
<div class="container"> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" ng-repeat="x in records"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" ng-click="active.record = $index">{{x.Name}}</a> 
 
     </h4> 
 
     </div> 
 
     <div ng-if="active.record == $index" class="panel-collapse collapse "> 
 
     <div class="panel-body">dfdfdfd</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </body> 
 
    </html>

Здесь я добавил флаг на контроллере

$scope.active = { 
    record: 0 
};

Что содержит индекс вкладок по умолчанию в массиве records, и я обновляю его в ng-click="active.record = $index" с помощью щелчка. Затем мы показываем активное тело табуляции, используя ng-if="active.record == $index".

источник

2017-01-31 13:37:13

Спасибо за это. Но это не работает: при щелчке на другой вкладке он должен отображать другие данные вкладки и скрывать вкладку вкладки по умолчанию или вкладку, которая открыта. @AlonEitan – Mohammed

@Mohammed Что не работает? Скажи мне, и я отредактирую свой ответ. –

Я просто комментирую[email protected] – Mohammed

Angularjs - Как показать по умолчанию первой вкладке аккордеона в нг-повторе

ответ

Смежные вопросы