Trouble setting event handler on bootstrap-switch element with AngularJS

Question

The context is I have a radio button in my angular application that triggers a drop-down menu to appear. I'm attempting to attach an event listener that will fire off an AJAX request to a server and populate the drop-down list with the response. I'm using angular-bootstrap-select/bootstrap-select for the switch.

My initial approach was to simply add an ng-click directive to the div surrounding the button, which works, but the request is only sent if the user clicks on the white part of the button:

Image of button:

However the click doesn't register if the user clicks the grey part where it reads "All". I also tried wrapping the div in an anchor and attaching the ng-click to that but that did not work either.

I also tried to use the method in the documentation: bootstrap-switch-event

My code:

    $('input[id="mySwitch"]').on('switchChange.bootstrapSwitch', function(event, state) {
    console.log('event triggered');
    if ( !itemsCalled ) {
        myService.items.get().$promise.then(function(response) {
            $scope.itemList = response.items;
        });
        itemsCalled = true;
    }
});

Template:

<input bs-switch id="mySwitch" ng-model="item" type="radio" switch-on-text="All" switch-off-text="Custom" switch-on-color="grey" switch-off-color="blue" switch-animate="true" switch-size="small" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'">

And a bunch of variations of this with no success. I'm pretty new to angular so I'm not sure if I'm going about this the wrong way or not.

Aquí está la solución: stackoverflow.com/questions/13077320/… — Cristian Agudelo
– Cristian Agudelo, Commented Jan 8, 2016 at 4:53

Thom-x · Accepted Answer · 2015-07-22 22:17:19Z

0

If you want to make the Ajax call when the switch change from "Custom" to "All" :

function Controller($scope) {
    $scope.$watch('item', function(newValue, oldValue){
        if(newValue === "All") {
           // Ajax call
          alert("ajax");
        }
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="Controller">

<input ng-model="item" type="radio" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'">
  
<button ng-click="item = 'Custom'">Reset</button>
  
</div>

edited Jul 22, 2015 at 22:17

answered Jul 22, 2015 at 22:09

Thom-x

8761 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlanJ Over a year ago

I'm looking to make the call whenever the switch is pressed, from any part of the switch.

Collectives™ on Stack Overflow

Trouble setting event handler on bootstrap-switch element with AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related