Угловой бутстрап UI аккордеон не работает как ожидалось

Я использую компонент аккордеона Angular Bootstrap UI. первый аккордеон по умолчанию. Когда пользователь добавить новый аккордеон затем первый аккордеон должен коллапса и недавно добавили аккордеон следует расширить. Когда пользователь нажимает на любой аккордеон, тогда он должен быть расширенный и свернуть остаток аккордеонов. Пользователь может добавить несколько аккордеона.Угловой бутстрап UI аккордеон не работает как ожидалось

Как я могу это достичь?

Я новичок в угловом и угловом пользовательском интерфейсе Bootstrap.

То, что я сделал до сих пор

Ctrl.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', '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' 
    }, { 
    title: 'Dynamic Group Header - 2', 
    content: 'Dynamic Group Body - 2' 
    }, { 
    title: 'Dynamic Group Header - 3', 
    content: 'Dynamic Group Body - 3' 
    }]; 


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


    // work permit form 
    $scope.transforms = [{ 
    name: "transform", 
    id: 1, 
    wpformfields: [{ 
     employee: '', 
     admount: '' 
    }] 
    }]; 

    $scope.addtransactionForm = function(transform) { 
    $scope.currentnum = transform.wpformfields.length; 
    //alert("hello"); 

    transform.wpformfields.push({ 
     employee: '', 
     amount: '' 
    }); 
    }; 

});

index.html

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

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 

    <div ng-controller="AccordionDemoCtrl" class="container"> 
    <br> 
    <br> 
    <br> 
    <div class="row"> 
     <div class="col-md-10"> 
     <form role="form" id="$index" class="base-form" ng-repeat="form in transforms track by $index"> 
      <input type="checkbox" ng-model="oneAtATime" style="display:none"> 
      <uib-accordion close-others="oneAtATime"> 

      <div uib-accordion-group class="panel-default" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled" ng-repeat="itemfield in form.wpformfields track by $index"> 
       <uib-accordion-heading> 
       Transaction <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i> 
       </uib-accordion-heading> 

       <div class="md-col-10 main-container"> 
       <div class="row"> 
        <div class="col-md-6"> 
        <div class="form-group"> 
         <label>Employee name </label> 
         <input type="text" class="form-control" name="employee" id="employee" ng-model="itemfield.employee"> 
        </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-6"> 
        <div class="form-group"> 
         <label>Amount </label> 
         <input type="text" class="form-control" name="amount" id="amount" ng-model="itemfield.amount"> 
        </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12"> 
        <button type="submit" class="btn btn-default pull-right" ng-click="addTransaction(form, $index)"><i class="fa fa-floppy-o"></i> Save record</button> 
        </div> 
       </div> 
       </div> 
      </div> 

      </uib-accordion> 
      <div class="row"> 
      <div class="col-md-12 col-md-offset-5"> 
       <a class="btn btn-danger" ng-click="addtransactionForm(form)"><i class="fa fa-user-plus fa-lgt" ></i> Add new transaction record</a> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</body> 

</html>

Plunker доступный link

источник

2016-08-30 MysticCodes

Существует modified version, который должен удовлетворить ваши потребности. В принципе, вам нужно добавить isOpen и isDisabled Недвижимость для каждого аккордеона, затем установите isOpen на true для нового аккордеона, другие будут автоматически закрыты.

источник

2016-08-30 09:34:25

Я не могу открыть крах аккордеонов. Открыт только новый аккордеон! – MysticCodes

Потому что они оба отключены, как вы хотели. Если «отключить» вы хотели закрыть их, вы должны удалить for-loop в 'addtransactionForm'. –

«disable» Я хочу сказать, рухнет! – MysticCodes

Угловой бутстрап UI аккордеон не работает как ожидалось

ответ

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