How To Get Value From Dropdownlist With Angular js

Spread the love


We have already explained about angular js in our previous post.in this post, we going to see How To Get Value From Dropdownlist With Angularjs.
many times we need to manipulate select box events for making a specific operation like making ajax request to updates next controls, generating pop-ups, loading student’s name according to department name etc.
Angular has provided the best way to manipulate events like ng-click,ng-change.etc.. in this example we have used ng-change events of angular js for getting selected values from the dropdown box.

Application Flow:

1)Angular application in defined using ng-app due to this their no need for manual bootstrapping angular application.ng-app automatically bootstrap angular js application.
2)ng-controller=”select controller” defines controller attribute to angular js directives.
3)ng-model=”Select Box” it binds the value of elements to application data.
4)ng-change=”get_value()” it detects change events of element and execute function get_data().
5)script block detects change events of select elements and alert value of selected options.



Shamle Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
   <head>
      <title>How To Get Value From Dropdown List With Angularjs</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
   </head>
   <body>
      <div ng-app="myApp" ng-controller="selectcontroller">
         <label class="child-label" for="existing-phases">Select Options:&nbsp;&nbsp;</label> 
         <select class="form-control" ng-model="Selectebox" ng-change="get_value()">
            <option disabled selected value>-- select --</option>
            <option>GeekBaba</option>
            <option>Geekbaba.org</option>
            <option>AngularJs</option>
            <option>Free Tutorials</option>
         </select>
      </div>
      <script> var app = angular.module('myApp', []); app.controller('selectcontroller', function($scope) { $scope.get_value=function() { alert($scope.Selectebox); }; }); </script> 
   </body>
</html>

 

 


 

You May Like Also :

1 Comment

Add a Comment
  1. Wow! I like it…
    Nicely explained…

Leave a Reply

Your email address will not be published. Required fields are marked *

Geekbaba.org - Hot News ,Tutorials,Tips & Tricks,Entertainment,Sports,Business World. © 2017