Question

我正在使用Angular Bootstrap UI的手风琴组件。默认情况下会扩展第一个手风琴。当用户添加新的手风琴时，第一个手风琴应该崩溃并且新添加手风琴应该展开。当用户点击任何手风琴时，应该展开并折叠其他手风琴。用户可以添加多个手风琴。

我如何实现这一目标？

我是angular and Angular Bootstrap UI的新手。

到目前为止我做了什么

Ctrl.js

$("#change")

的index.html

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: ''
    });
  };

});

可以使用 link

Answer 1

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

Angular Bootstrap UI手风琴没有按预期工作

1 个答案: