Angular Bootstrap ui手風琴組「一次打開一個」不起作用

我一直在使用Angular ui-bootstrap。在這裏，oneAtATime即使設置爲true，也不起作用。這是我的代碼。Angular Bootstrap ui手風琴組「一次打開一個」不起作用

<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鏈接。

來源

2016-07-04 htoniv

您的HTML結構錯誤。應該只有單個uib-accordion元素和多個uib-accordion-group元素。所以，簡單地改變你的代碼是這樣的：

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

我做什麼uib-accordion-group元素乾脆搬到你的ng-repeat表達。

請參見下面的工作示例：

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>

來源

2016-07-04 13:01:57

哦謝謝。真棒.... – htoniv

但是如果我使用一些使用組值的HTML元素，如使用uib-accordion-group。 – htoniv

沒有讓你@htoniv請你詳細說明。 –

Angular Bootstrap ui手風琴組「一次打開一個」不起作用

回答

相關問題