Introduction:
Here I will explain AngularJS ng-options or ng-repeat example to bind dropdownlist value and text using AngularJS or populate or fill dropdowlist with option values using ng-repeat or ng-options in AngularJS. Generally 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
|
|||
0 comments :
Note: Only a member of this blog may post a comment.