Introduction
This article explains how to use AngularJS to get dropdownlist selected value and text using ng-change event with example or use dropdown list ng-change event to get selected value and text using AngularJS with examples. By using ng-model property in AngularJS we can get dropdownlist selected value and text in ng-change event.
To get dropdownlist selected value and text in ng-change event we can use ng-model option in AngularJS like as shown below
JAVA SCRIPT
$scope.getselectval = function () { $scope.selectedvalues= 'Name: ' + $scope.selitem.name + ' Id: ' + $scope.selitem.id; } Select Name: <select ng-options="s.name for s in sample" ng-model="selitem" ng-change="getselectval()"> <option value="">--Select--</option> </select> <p> {{selectedvalues}}</p>
If you want to check it in complete example you need to write the code like as shown below
HTML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Get Dropdownlist Selected value and text in Angularjs</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('sampleapp', []) app.controller('samplecontrol', function ($scope) { $scope.sample = [{ id: '1', name: 'A' }, { id: '2', name: 'B' }, { id: '3', name: 'C' }, { id: '4', name: 'D' }, { id: '5', name: 'E' }, { id: '6', name: 'F' }]; $scope.getselectval = function () { $scope.selectedvalues= 'Name: ' + $scope.selitem.name + ' Id: ' + $scope.selitem.id; } }); </script> </head> <body data-ng-app="sampleapp" data-ng-controller="samplecontrol"> <form id="form1"> Select value: <select ng-options="s.name for s in sample" ng-model="selitem" ng-change="getselectval()"> <option value="">--Select--</option> </select> <p> {{selectedvalues}}</p> </form> </body> </html>
No comments:
Post a Comment