角起動ストラップuuアコーディオングループ「一度に1つ開く」は動作しません

私は角を使用していますui-bootstrap。ここではtrueに設定されていてもoneAtATimeは機能しません。ここに私のコードです。角起動ストラップuuアコーディオングループ「一度に1つ開く」は動作しません

<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

しかし、私はuib-accordion-groupを使用するようなグループ値を使っていくつかのHTML要素を使用しています。 – htoniv

あなたはあなたを手に入れませんでしたか？ –

角起動ストラップuuアコーディオングループ「一度に1つ開く」は動作しません

答えて

関連する問題