通过单击上一组中的按钮更改 UI Bootstrap 手风琴组内容

Question

我有这个手风琴：

        <uib-accordion close-others="true">
            <uib-accordion-group heading="Action" is-open="true" class="text-center">
                <div class="btn-group text-center" data-toggle="buttons" >
                    <button type="button" class="btn" 
                        ng-repeat="action in actions" ng-model="$parent.selectedAction" uib-btn-radio="action"
                        ng-class="{'btn-danger custom-btn-danger': $index == 0, 'btn-success custom-btn-success': $index == 1}" >
                        {{action.text}}
                    </button>
                </div>
                {{selectedAction}}
            </uib-accordion-group>
            <uib-accordion-group heading="Confirm" is-open="true">
                <div ng-if="selectedAction.value == 'reject'">
                    Comments
                    <br />
                    <textarea cols="30" rows="5"></textarea>
                    <br />
                    <br />
                    <div class="text-center">
                        <input type="button" value="Reject" class="btn btn-danger active" />
                    </div>
                </div>
                <div ng-if="selectedAction.value == 'approve'">
                    <div class="text-center">
                        <div class="btn-group btn-group-vertical" data-toggle="buttons">
                            <button type="button" class="btn btn-primary custom-btn-primary"
                                ng-repeat="item in items" ng-model="$parent.selectedProcessLevel" uib-btn-radio="item"
                                ng-style="roundTopRight($index)">{{item.text}}</button>
                        </div>
                    </div>
                    <br />
                    Comments
                    <br />
                    <textarea cols="30" rows="5"></textarea>
                    <br />
                    <br />
                    <div class="text-center">
                        <input type="button" value="Approve" class="btn btn-success active" />
                    </div>
                </div>
            </uib-accordion-group>
        </uib-accordion>

还有这个javascript：

$scope.selectedAction = { value: 'approve', text: 'Approve', isOpen: false };

$scope.actions = [
    { value: 'reject', text: 'Reject', isOpen: true },
    { value: 'approve', text: 'Approve', isOpen: false },
];

$scope.selectedProcessLevel = { value: '2lp', text: '2 Level Process' };

$scope.processLevels = [
    { value: '1', text: 'One' },
    { value: '2', text: 'Two' },
    { value: '3', text: 'Three' },
];

$scope.roundTopRight = function (index) {
    if (index == 0)
        return { 'border-top-right-radius': '4px' };
}

我想做的是通过单击拒绝或批准按钮来更改第二个手风琴组的内容。在使用 UI Bootstrap 手风琴之前，它是一个简单的 table 并且一切正常。

是否存在范围问题？

还有一件事：我需要做什么才能通过单击其中一个按钮自动折叠操作组并展开确认组？

谢谢

Answer 1

更新：这是一个非常简单的例子：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').service('AccordionService', function() {
  this.value = 'initial value';  
});
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function (AccordionService, $scope) {
  $scope.service = AccordionService;
});

<div ng-controller="AccordionDemoCtrl">
  <uib-accordion close-others="false">
    <uib-accordion-group heading="First Accordion" is-open="true">
      <input type="text" class="form-control" ng-model="service.value" />
    </uib-accordion-group>
    <uib-accordion-group heading="Second Accordion" is-open="true">
      Service value: {{ service.value || 'no value set' }}
    </uib-accordion-group>
  </uib-accordion>
</div>

要回答您的第一个问题，是的，存在范围界定问题。在 Angular 中，默认情况下，嵌套范围继承和作用域字段为对象继承并为基元复制（这就是为什么你几乎不想使用基元）。但是，当您使用隔离范围指令时，此模型会中断 - 这就是我们在 <accordion-group> 元素中使用的 - here's the code.

但是等等！一切都没有丢失。有几种方法可以解决这个问题，但最好的方法是创建一个服务来存储您需要在 accordion 组之间共享的值。然后，您可以在应用中的任何位置引用这些值，包括在其他 <accordion-group> 元素中。

第二个问题的答案与第一个问题非常相似 - 您需要切换 is-open 的值，opening/closing 将自动发生。

Answer 2

最后我找到了一个更简单的解决方案：我使用对象而不是基元。这是代码：按钮的：

<button type="button" class="btn" 
    ng-repeat="action in actions" ng-model="selectedAction.value" uib-btn-radio="action.value"
    ng-class="{'btn-danger custom-btn-danger': $index == 0, 'btn-success custom-btn-success': $index == 1}" >
    {{action.text}}
</button>

这是 ng-if:

<div ng-if="selectedAction.value == 'reject'">

和 javascript:

$scope.selectedAction = { value: '' };

通过单击上一组中的按钮更改 UI Bootstrap 手风琴组内容

Change UI Bootstrap accordion group content by click a button in the previous group

css

accordion

twitter-bootstrap

angularjs

angular-ui-bootstrap