Saturday, March 21, 2015

ng-change directive with Dropdown list

Change events are used to handle user interactions with controls like TextBox, Dropdown list, checkboxes etc. In this post we shall see on how to handle change events associated with the dropdown control.

Change event in these controls can be handled by creating a handler function and associating the event to the function using the ng-change directive. The following is the syntax for the ng-change directive and the handler function.

ng-change="HandleChange()

In the following example the dropdown list control has as ng-change directive which binds the events from the dropdown list controller to the function HandleChange(), when the user changes the selection in the dropdown list control the HandleChange() function is called and the currently selected language is displayed in the label.


<html ng-app="changeDropdownApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('changeDropdownApp', []);

function changeDropdownController($scope) {
    $scope.myLanguages = [
                             {
                                      "code": "en",
                                      "name": "English"
                             },
                             {
                                      "code": "de",
                                      "name": "German"
                             }];
          //
          $scope.HandleChange = function() {
             $scope.SelectedLanguage = $scope.myLanguage
          }
};
</script>
</head>
<body>
          <div ng-controller="changeDropdownController">
                   <select
                             ng-model="myLanguage"
                             ng-options="value.name as value.name for value in myLanguages"
                             ng-change="HandleChange()">
                             <option>--</option>
                   </select>
                   <div>
                             Selected Language: {{SelectedLanguage}}
                   </div>
          </div>
</body>
</html>




Search Flipkart Products:
Flipkart.com

No comments: