Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs Bind (Set) Dropdownlist Value and Text using ng-Options or ng-Repeat

Feb 17, 2015
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.



To bind dropdownlist value and text using AngularJS we have different type of methods those are

Method1:

By using ng-repeat method we can bind dropdownlist options 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>
<option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</option>
</select>
</form>
</body>
</html>

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

Select Name:

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 RSS subscribe by email Subscribe by Email

5 comments :

Bharath said...

How to bind another dropdown based on selected value of firsr dropdown..

Unknown said...

but ng-model dont set the value in initial?

Anonymous said...

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?

interviewfunda.com said...

Excellent explainations...

Maneesh Deepankar said...

This Article is very helpful for me. I am beginner in Angular js.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.