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

$index是一个角度变量，它引用数组中重复元素的索引。我留下了js逻辑来维护status对象。

为了样式，请更正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 2

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

$scope.oneAtATime = true

或

<accordion close-others = "true">

Answer 3

如果我正确地取消它，你可以这样做。

将属性openState添加到目标对象，并根据需要进行更改。因此，保持第二个活动状态可以将每个状态设置为false，除了第二个状态。它类似于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手风琴问题

3 个答案: