angularjsHow can I use AngularJS to create a select element that triggers an event on change?
To create a select element that triggers an event on change using AngularJS, you can use the ng-change
directive. This directive will evaluate an expression whenever the value of the element changes.
For example, the following code will create a select element with two options, and when the value of the select element is changed, the onChange()
function will be called:
<select ng-model="selectedOption" ng-change="onChange()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
The onChange()
function can be defined in the controller, and will be called whenever the select element is changed.
$scope.onChange = function() {
console.log('Value changed to', $scope.selectedOption);
};
The output of the above code will be:
Value changed to option1
Code explanation
ng-change
directive - this directive will evaluate an expression whenever the value of the element changes.ng-model
directive - this directive binds the value of the element to a property on the scope.onChange()
function - this function is called whenever the value of the select element is changed.
Helpful links
More of Angularjs
- How can I create an editable AngularJS application?
- How can I use AngularJS to create a zone in my software development project?
- How can I use AngularJS to prevent cross-site scripting attacks?
- How do I use the window.open function with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How can I use Angular and Zorro together to create a software application?
- How do I install Yarn using Angular?
- How can I use AngularJS to transform XLTS files?
- How can I use AngularJS with Visual Studio Code?
- How do I add a tooltip to an element in AngularJS?
See more codes...