Angular Bootstrap UI 手风琴未按预期工作

Question

我正在使用 Angular Bootstrap UI 的手风琴组件。默认展开 first 手风琴。当用户添加新手风琴时，first 手风琴应该 collapse 并且 newly 添加 accordion 应该展开。当用户单击任何手风琴时，它应该是 expanded 和 collapse 其余的手风琴。用户可以添加多个手风琴。

我该如何实现？

我是 angular 和 Angular Bootstrap UI 的新手。

到目前为止我做了什么

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

Answer 1

有modified version应该可以满足您的需求。基本上，您需要为每个手风琴添加 isOpen 和 isDisabled 属性然后将 isOpen 设置为 true 新手风琴，其他手风琴将自动关闭。

Angular Bootstrap UI 手风琴未按预期工作

Angular Bootstrap UI accordion not working as expected

accordion

angularjs

angular-bootstrap