Angular Bootstrap 手风琴问题

Question

我正在尝试创建手风琴来循环我的 data.it 部分工作，但我需要动态地将新部分添加到手风琴中。一开始我需要打开第一个，但是在用户保存并单击添加后，我需要打开第二个，然后关闭其他的。我的代码是：

<accordion close-others="oneAtATime">
        <accordion-group 
             heading="{{destination.length}}" 
             is-open="status.isFirstOpen" 
             is-disabled="status.isFirstDisabled" 
             ng-repeat="destination in mileage.destionations">
                <select ng-model='destination.Type' 
                    id='type' 
                    ng-options='Type for Type in mileageTypes' 
                    ng-init='mileageTypes[0]' 
                    ng-change='updateReimbur(destination)'>
                </select>
                <select ng-model='destination.Reimbursable' 
                    id='reimbursable' 
                    disabled="true" 
                    ng-options='reimbursable for reimbursable in mileageReimbursment' 
                    ng-init='mileageReimbursment[0]'>
                </select>
        </accordion-group>
  </accordion>

JS:

$scope.mileage.destionations = [{
    Type: '',
    Reimbursable: "Yes",
    Distance: true,
    Odometer: false,
    Total: 0,
    From: '',
    To: ''
}];
$scope.addNewDestionation = function () {
    $scope.NewDestionation = {
        type: '',
        reimbursable: "Yes",
        Distance: true,
        Odometer: false,
        total: 0,
        From: '',
        To: ''
    }
    $scope.mileage.destionations.push($scope.NewDestionation);
}
$scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};

我怎样才能总是让最后一个（新的）打开并关闭其他的？

Answer 1

close-others 属性采用布尔值。您应该定义

$scope.oneAtATime = true

或

<accordion close-others = "true">

Answer 2

我相信您会按照这些提示进行操作：

将close-others="oneAtATime"替换为close-others="true"。
在所有重复元素上，你写的是：is-open="status.isFirstOpen"，相当于is-open="true"。这是您的主要错误，因为您说所有组都应该打开。尝试维护对已打开组的引用。您可以维护一系列状态，但类似的东西也可以解决问题，并避免您维护所有状态：
```
     is-open="status[$index].isOpen" 
     is-disabled="status[$index].isDisabled" 
```

$index 是一个 angular 变量，它引用数组中重复元素的索引。我把维护 status 对象的 js 逻辑留给你。

为了风格，更正destionations（destinations）中的拼写错误，在函数外的变量中初始化默认的新目标addNewDestionation，并推送该变量。像那样：

var newDestination = {
    type: '',
    reimbursable: 'Yes',
    Distance: true,
    Odometer: false,
    total: 0,
    From: '',
    To: ''
};

$scope.addNewDestionation = function () {
    $scope.mileage.destionations.push(newDestination);
}

Answer 3

如果我理解正确，你可以这样做。

将属性 openState 添加到您的目标对象并根据需要进行更改。因此，保持第二个活动可以通过将每个状态设置为 false 除了第二个。它类似于 Michael 的回答 2.，我也认为在这里创建一个 status 变量来跟踪打开状态可能更好。

请查看下面的演示（它是代码的简化版本，使内容更易于阅读）或此处 jsfiddle。

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', MainController);

function MainController($scope) {
    var itemCount = 0; // just to have an increasing title
    $scope.oneAtATime = true;
    $scope.mileage = {};
    $scope.mileage.destionations = [{
        Type: '',
        Reimbursable: "Yes",
        Distance: true,
        Odometer: false,
        total: itemCount,
        From: '',
        To: '',
        openState: true
    }];
    $scope.addNewDestination = function () {
        var index = $scope.mileage.destionations.length,
            openState = (index == 1);
        
        angular.forEach($scope.mileage.destionations, function(destination, index) {
            // turn all off except second
            destination.openState = (index == 1);
        });
        
        itemCount++;
        
        var newDestination = {
            type: '',
            reimbursable: "Yes",
            Distance: true,
            Odometer: false,
            total: itemCount,
            From: '',
            To: '',
            openState: openState
        };
        
        
        $scope.mileage.destionations.push(newDestination);
    }
    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <accordion close-others="oneAtATime">
    <accordion-group is-open="destination.openState" heading="{{destination.total}}" ng-repeat="destination in mileage.destionations">
      {{destination|json}}
    </accordion-group>
  </accordion>
    <button ng-click="addNewDestination()">add</button>
</div>

Angular Bootstrap 手风琴问题

Angular Bootstrap Accordion issue

angularjs

angular-ui-bootstrap