CODEWITHSUNDEEP
angularjsaccordionangular-bootstrap
MysticCodes
MysticCodes

Reputation: 3282

Angular Bootstrap UI accordion not working as expected

I am using accordion component of Angular Bootstrap UI. The first accordion is expanded by default. When user add new accordion then first accordion should collapse and newly added accordion should be expand. When user clicks any accordion then it should be expanded and collapse rest of the accordions. User can add more than one accordion.

How can I achieve this?

I'm newbie to angular and Angular Bootstrap UI.

What I have done so far

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

Upvotes: 2

Views: 1708

Answers (1)

G07cha
G07cha

Reputation: 4154

There is modified version which should satisfy your needs. Basically, you need to add isOpen and isDisabled property for each accordion then set isOpen to true for new accordion, others will be closed automatically.

Upvotes: 2

Related Questions