Question

首先，之前已经回答了类似的问题，但前面提到的并没有解决我的问题。

我想 - 从我的js内部，而不是我的html中 - 能够关闭当前的手风琴并打开下一个。请注意，此操作将从控制器内的js触发，而控制器不是手风琴控制器（是的，我可以使用工厂功能并使$ scope可用于其他控制器，我已经在做了）。同样重要的是手风琴是硬编码的，所以它们不在循环中。

编辑：添加代码

好的，我的accordionCtrl是空的（目前我不需要添加任何代码），所以所有动作都发生在另一个控制器上：

    var CustomerFormCtrl = function($scope, mainObj, $http, $timeout) {

    $scope.saveCustomer = true;

    $scope.master = {};

    $scope.update = function(customer) {

        $scope.master = angular.copy(customer);
        mainObj.customer[customer.name] = customer;

        // Saving customer
        if($scope.saveCustomer === true) {

            $http({

                method: 'POST',
                url: '/customers/create',
                data: $.param(mainObj.customer),
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

            })
            .success(function(data) {

                $scope.SavedCustomer = true;
                $scope.Message = "Customer saved";

                $timeout(function() { $scope.SavedCustomer = false }, 2000);

            });

        }

    };

    $scope.reset = function() {

        $scope.customer = angular.copy($scope.master);

    };

    $scope.reset();

}

这是我的手风琴（用玉而不是html）

div(ng-controller="accordionCtrl")

    accordion(close-others="false")

        // Customer accordion
        accordion-group(heading="Step 1 - Customer details" is-open="true")

            div.col-md-6

                h4 Search a customer

                div(class="container-fluid", ng-controller="SearchCustomerCtrl")

                    input(type="text", ng-model="asyncSelected", placeholder="Search customer", typeahead="address for address in getLocation($viewValue) | filter:$viewValue" typeahead-loading="loadingLocations" class="form-control")
                    i(ng-show="loadingLocations" class="glyphicon glyphicon-refresh")

            div.col-md-6

                h4 Customer details

                div(ng-controller="CustomerFormCtrl")

                    div(ng-show="SavedCustomer")

                        alert(type="success") {{Message}}

                    form(name="CustomerDetails", class="", role="form", novalidate)

                        div.form-group

                            // my form here

        // Order accordion
        accordion-group(heading="Step 2 - Placing the order")

            p Order

        // Checkout accordion
        accordion-group(heading="Step 3 - Checkout")

            p Checkout

在$http({...}).success(function(data) {...}我想添加一些关闭Step 1手风琴并打开第2步的代码。

如果我使用的是jQuery（我可以做，但我不愿意），我可以选择上面提到的手风琴，通过它'id / class这些线路：

$('.boot-tab').find('li.active')
                .next()
                .find('a[data-toggle="tab"]')
                .click();

但是对于Angular，我不知道如何使这项工作。谢谢你的帮助。

Answer 1

当然 - 最简单的方法是将is-open设置为true，而不是将其设置为范围内的属性。

accordion-group(heading="Step 1 - Customer details" is-open="$parent.step1open")

如果你愿意，也可以将init内联在那里：

accordion-group(heading="Step 1 - Customer details" is-open="$parent.step1open" ng-init="step1open = false")

然后在你的JS中，在你的成功函数中设置$scope.step1open = true。我假设您在accordianCtl中执行此操作 - 如果您不这样做，您很快就会有关于范围可见性和继承的后续问题。

以下是a plunker的示例。

Answer 2

接受的答案似乎存在一些问题，因此对于仍然遇到问题的其他人来说，让我帮忙。这里不仅可以以编程方式显示内容，还可以编程方式显示/隐藏组的增量，有点像分页。

这是手风琴的快速示例：
<accordion close-others="false"> <accordion-group ng-repeat="item in myAjaxedItems" is-open="accordionIndexViewable($index)"> ... some accordion content / heading / what-have-you </accordion-group> </accordion>

注意"accordionIndexViewable"功能。您可以使用$index变量传递手风琴的重复索引。然后检查该索引是否应该基于其他范围＆＃34;可查看项目限制＆＃34;来查看。你可以有一个＆＃34;显示更多＆＃34;按钮，在这种情况下会调用其他函数来增加＆＃34;可查看的项目限制＆＃34;。

以下是控制器：
myApp.controller('MyCustomAccordionController', function($scope){ $scope.itemLimit = 1; $scope.accordionIndexViewable = function(index){ return index < $scope.itemLimit; }; // another function which will trigger on some event to change the itemLimit. Can do a variety of different things for paginating down/up. But in this case it's super simple. $scope.onClickingSomething = function() { if($scope.itemLimit <= 10) $scope.itemLimit += 2; }; });

实际模型项本身可能不需要is-open属性。对我来说，模型上有一个更新（通过ajax），我不想要一个＆＃34; open＆＃34;实际DB模型项的属性。 accordionIndexViewable函数是一个很好的替代函数和幂等函数。甚至可以使用对象散列图来更有效地使用对象散列映射，但这不是回答这个问题所必需的。

如何以编程方式关闭/打开angular-ui bootstrap手风琴 - 在js文件中

2 个答案: