Fourat Fourat - 4 months ago 79
AngularJS Question

Onchange event with AngularStrap select element



I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)

My HTML:


<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>


My JS:

$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];


I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes


Thanks

Answer

There are a couple of options one is using ngChange Reference

The other is using $watch. See the $watch section of the scopeapi reference

An example using watch (this would be in your controller)

$scope.$watch('selectedCriteria', function() {
     $scope.SomeFunction();
});

An example using ngChange

<button type="button" class="btn btn-default" 
   ng-change="SomeFunction()"
   ng-model="selectedCriteria" data-html="1" 
   ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
      Action <span class="caret"></span>
</button>
Comments