Firstly, a similar question has been answered before, however the aforementioned does not resolve my issue.
I'd like to - from within my js, not within my html - be able to close the current accordion and open the next. Please note that this action will be triggered from the js from within a controller which is not the accordion controller (yes, I can use a factory function and make $scope available to other controllers, which I'm doing already). Also important is that the accordions are hard-coded so, they're not within a loop.
EDIT: Adding code
Ok, on my accordionCtrl is empty (at the moment as I don't need to add any code it for now), so all the action is happening on another controller:
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();
}
And here's my accordion (in jade rather than 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
On $http({...}).success(function(data) {...} I'd like to add some code that'd close the Step 1 accordion and open Step 2.
If I was using jQuery (which I can do, but I'd rather not) I could select the aforementioned accordion through it' id/class something along these lines:
$('.boot-tab').find('li.active')
.next()
.find('a[data-toggle="tab"]')
.click();
But with Angular I've no idea how to make this work. Thanks for your help.
