如何以編程方式在js文件中關閉/打開angular-ui bootstrap手風琴

Question

首先，以前已經回答過類似的問題，但是上述問題不能解決我的問題。

我想-從我的js中而不是在html中-能夠關閉當前的手風琴並打開下一個。 請注意，此動作將由不是手風琴控制器的控制器中的js觸發（是的，我可以使用工廠函數並使$ scope可用於其他控制器，而我已經在這樣做）。 同樣重要的是，手風琴是硬編碼的，因此它們不在循環中。

編輯：添加代碼

好的，在我的手風琴上，Ctrl為空（目前，我暫時不需要添加任何代碼），因此所有操作都在另一個控制器上進行：

    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) {...}我想添加一些代碼來關閉步驟1的手風琴並打開步驟2。

如果我使用的是jQuery（我可以這樣做，但我寧願不這樣做），則可以通過以下方式通過它的id / class選擇上述手風琴：

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

但是，使用Angular，我不知道如何進行這項工作。 謝謝你的幫助。

Answer 1

當然，最簡單的方法是將其設置is-open范圍內的屬性，而不是將is-open設置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進行此操作-如果不這樣做，您很快就會遇到有關范圍可見性和繼承的后續問題。

這是一個例子。

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變量傳遞手風琴的ng-repeat的$index 。 然后根據其他范圍“可見項限制”檢查該索引是否應可見。 您可以有一個“顯示更多”按鈕，在這種情況下，該按鈕將調用其他功能來增加“可見項限制”。

這是控制器：
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），我不希望實際的數據庫模型項具有“打開”屬性。 accordionIndexViewable函數是很好的選擇和冪等。 甚至可以使用對象哈希圖來執行此操作，這可能是更有效的方法，但是在這里回答這個問題已經超出了必要。