Angular bootstrap ui Akkordeon Gruppe "einzeln öffnen" funktioniert nicht

Ich habe Angular ui-bootstrap verwendet. Hier funktioniert oneAtATime nicht, obwohl der Wert auf true festgelegt ist. Hier ist mein Code.Angular bootstrap ui Akkordeon Gruppe "einzeln öffnen" funktioniert nicht

<div ng-repeat="group in groups track by group.key"> 
    <uib-accordion close-others="oneAtATime"> 
    <uib-accordion-group> 
     <uib-accordion-heading > 
     <div> 
      {{ group.title }} 
     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
     </div> 
     </uib-accordion-heading> 
    </uib-accordion-group> 
    </uib-accordion> 
    </div>

plnkr Verbindung.

Quelle

2016-07-04 htoniv

Ihre HTML-Struktur ist falsch. Es sollte nur einzelne uib-accordion Elemente und mehrere uib-accordion-group Elemente geben. So einfach der Code wie folgt ändern:

<uib-accordion close-others="oneAtATime"> 
    <uib-accordion-group ng-repeat="group in groups track by group.key"> 
     <uib-accordion-heading> 
      <div> 
       {{ group.title }} 
       <i class="pull-right glyphicon" 
        ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
      </div> 
     </uib-accordion-heading> 
    </uib-accordion-group> 
</uib-accordion>

Was ich getan habe ist einfach bewegt Ihr ng-repeat Ausdruck in uib-accordion-group Element.

Siehe Arbeits Beispiel unten:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) { 
 
    $scope.oneAtATime = true; 
 

 
    $scope.groups = [{ 
 
    title: 'Dynamic Group Header - 1', 
 
    content: 'Dynamic Group Body - 1', 
 
    key: 1 
 
    }, { 
 
    title: 'Dynamic Group Header - 2', 
 
    content: 'Dynamic Group Body - 2', 
 
    key: 2 
 
    }]; 
 

 
    $scope.items = ['Item 1', 'Item 2', 'Item 3']; 
 

 
    $scope.addItem = function() { 
 
    var newItemNo = $scope.items.length + 1; 
 
    $scope.items.push('Item ' + newItemNo); 
 
    }; 
 

 
    $scope.status = { 
 
    isCustomHeaderOpen: false, 
 
    isFirstOpen: true, 
 
    open: true, 
 
    isFirstDisabled: false 
 
    }; 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
    <script src="script.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="AccordionDemoCtrl"> 
 
    <div class="checkbox"> 
 
     <label> 
 
     <input type="checkbox" ng-model="oneAtATime">Open only one at a time 
 
     </label> 
 
    </div> 
 
    <uib-accordion close-others="oneAtATime"> 
 
     <uib-accordion-group ng-repeat="group in groups track by group.key"> 
 
     <uib-accordion-heading> 
 
      <div> 
 
      {{ group.title }} 
 
      <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
 
      </div> 
 
     </uib-accordion-heading> 
 
     </uib-accordion-group> 
 
    </uib-accordion> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-07-04 13:01:57

oh danke. genial .... – htoniv

aber was, wenn ich einige HTML-Elemente benutze, die Gruppenwert verwenden, wie usib-accordion-group verwendend. – htoniv

Haben Sie nicht @htoniv bekommen können Sie bitte erarbeiten. –

Angular bootstrap ui Akkordeon Gruppe "einzeln öffnen" funktioniert nicht

Antwort

Verwandte Themen