How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

Question

How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

After selecting an option, I am facing an issue where I cannot capture the ng-click event when a user chooses a value from the drop-down menu. This is because the select option has been altered by bootstrap-select, as the default select option does not support CSS styling so I had to resort to using bootstrap-select.

Check out the preview here

Here is the code:

<select class="form-control selectpicker col-md-6 col-md-offset-3 input-question input-text v2-mod" 
           id="{{question.name}}"
           name="birthyear"
           required
           ng-model="answers.userdata[question.name]"
           ng-class="{'input-error': formValidation && questionForm.birthyear.$error.required}" >
               <option value="{{option.value}}" 
                       ng-click="next('stage5')" 
                       ng-repeat="(key, option) in question.options">
                                            {{option.label}}
               </option>
</select>

The code is affected after being modified with Bootstrap-select:

See the updated preview here

jquery css angularjs bootstrap-select

Answer 1

Answer №1

Utilizing ng-options and ng-change as default in Angular is recommended, it's more efficient than using ng-repeat on options.

Important: Remember to apply ng-change to the select element and not the individual option elements.

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

    $scope.data = [
        {name: "a"},
        {name: "b"},       
    ]
    
    $scope.get = function(value){
    
      console.log(value)
      
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">


    <select ng-model="form.select" ng-options="item as item.name for item in data" ng-change="get(form.select)"></select>

</div>

Answer 2

Utilizing ng-options and ng-change as default in Angular is recommended, it's more efficient than using ng-repeat on options.

Important: Remember to apply ng-change to the select element and not the individual option elements.

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

    $scope.data = [
        {name: "a"},
        {name: "b"},       
    ]
    
    $scope.get = function(value){
    
      console.log(value)
      
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">


    <select ng-model="form.select" ng-options="item as item.name for item in data" ng-change="get(form.select)"></select>

</div>

Answer 3

Answer №2

To utilize the ng-change event and connect it to ng-model, follow these steps:

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.changedValue = function(item) {
    console.log(item);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="selectpicker" ng-model="item" ng-change="changedValue(item)">
  <option value="">None</option>
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
  </select>

</div>

Answer 4

To utilize the ng-change event and connect it to ng-model, follow these steps:

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.changedValue = function(item) {
    console.log(item);
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="selectpicker" ng-model="item" ng-change="changedValue(item)">
  <option value="">None</option>
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
  </select>

</div>

How can I capture the ng-click event in AngularJS when using bootstrap-select for styled select inputs?

Answer №1

Answer №2

Similar questions

Issues with jqGrid treeGrid expanding and collapsing functionality not functioning as expected

Displaying modal popups limited to one per session

Spacing between the rows of a table

putting a division element above a image carousel

What are the alternatives to invoking a server-side C# method from JavaScript without using a WebMethod or UpdatePanel?

"Utilizing jQuery to asynchronously make an AJAX request with a setTimeout

Toggle the checkbox to update the count

jQuery can be used to mask phone numbers with three input fields

Ways to vertically center an absolutely positioned element

Tips for creating square corner images within a bootstrap card group

Incorporate jQuery into your MVC view by including Html.BeginForm

Tips for generating sub rows in AngularJS:

Extract latitude and longitude coordinates from a dataset by applying a rectangular filter

unable to display data through the web service

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use

Refreshing div content on selection change using PHP ajax with Jquery

I am sending the session data through PHP tags, and then attempting to dynamically hide and show a div element upon page load using jQuery, depending on the conditions specified

Using PHP and AJAX for deletion will only work on the initial row

Flag a specific property on a directive scope as needing an update

AngularJS: Incorporating multiple data components into a singular ng-model