Introduction:
Here I will explain how to bind dropdownlist value and text using AngularJS or fill dropdowlist with option values using AngularJS. In AngularJS we can fill or bind dropdownlist using ng-repeat or ng-options methods.
Description:
In previous articles I explained Angularjs convert lower case to upper case while typing text, Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos, jQuery redirect to another page after 5 seconds and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to bind dropdownlist value and text using AngularJS.
In previous articles I explained Angularjs convert lower case to upper case while typing text, Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos, jQuery redirect to another page after 5 seconds and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to bind dropdownlist value and text using AngularJS.
Method1:
By
using ng-repeat method we can bind
dropdownlist options like as shown below
|
Method
2:
By using ng-options method we can bind dropdownlist
like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Binding both value and
text in select dropdown in Angular.js</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: 'Suresh Dasari'
}, {
id: '2',
name: 'Rohini Alavala'
}, {
id: '3',
name: 'Mahendra Dasari'
}, {
id: '4',
name: 'Madhav Sai'
}, {
id: '5',
name: 'Mahesh Dasari'
}, {
id: '6',
name: 'Sateesh Alavala'
}];
});
</script>
</head>
<body data-ng-app="sampleapp"
data-ng-controller="samplecontrol">
<form id="form1">
Select Name: <select ng-options="s.id as s.name for s in sample" ng-model="col">
<option value="">--Select--</option>
</select>
</form>
</body>
</html>
|
Live
Demo
Check
below sample dropdownlist for live demo
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
How to bind another dropdown based on selected value of firsr dropdown..
but ng-model dont set the value in initial?
Hi Suresh,
I need your help. I've created a Search page using Visualforce, Apex Controller and AngularJS. Everything is working fine except the "Show Entries" picklist. The picklist has 4 values i.e. 25,50,100,200. If someone choose suppose 25 then the number of records displayed in the table should be 25. How can we achieve this?
Excellent explainations...
This Article is very helpful for me. I am beginner in Angular js.
Note: Only a member of this blog may post a comment.