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手风琴之前，它是一个简单的表格，并且完美无缺。

是否存在范围问题？

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

谢谢

Answer 1

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

<a href="javascript:...init();">move</a>

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

要回答您的第一个问题，是的，存在一个范围问题。在Angular中，默认情况下，嵌套作用域继承和作用域字段是为对象继承的，并为基元复制（这就是为什么你几乎不想使用基元）。但是，当您使用隔离范围指令时，此模型会中断 - 这是我们在word_file = open ("./words.txt", "r", encoding='utf-8')元素中使用的 - here's the code。

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

你的第二个问题的答案与第一个问题非常相似 - 你需要切换<accordion-group>的值，开启/关闭将自动发生。

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手风琴组内容

2 个答案: