Angularjs dropdown select value, text, multiple values with demo

Angularjs dropdown/slect have more option than any other .net language dropdownlist, we can bind and get only Id or Text or both from dropdown, even we can bind and get more than two values like value, text and role from a dropdown and even more. We can try to see all the possible ways to bind the dropdown/select in this article, which is not possible to cover every thing but we will try our best to cover the topic.

What we are going to achieve in this article:

• Bind dropdown with comma separated string
• Bind dropdown with Array of string
• Bind dropdown with value text and post only value
• Bind dropdown with value text and post both
• Bind dropdown with value text & role and post all the three
• Bind dropdown with Formatted text say (Id: Text Role)

Bind dropdown with comma separated string

Let's take the example of month in which we want to bind the number from 1 to 12, this case we can create a variable have number from 1 to 12 with comma separated string, see it in action

/*Controller code*/
$scope.csValue = '7';    
$scope.csString = "1,2,3,4,5,6,7,8,9,10";

/* HTML code */           
<select ng-model="csValue"               
        ng-options="x for x in csString.split(',') "
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose Month --</option>
</select> 

Bind dropdown with Array of string

Binding array of string is very common, just take the example of month, say, we have a list of strings of months which we want to bind, then here is the code for it:

/* Controller code */
$scope.month = 'March';
$scope.months = ["January", "February", 
      "March", "April", "May", "June", 
      "July", "August", "September", 
      "October", "November", "December"];

/* HTML code */
<select ng-model="month"               
        ng-options="x for x in months"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose Month --</option>
</select> 

Bind dropdown with value text and post only value

Let's take and example of country, which we want to bind Id and name, show country name and post country Id. For it we will use a hard-coded array of countries. See it with example:

/* Controller code */
$scope.countryId = 3;
$scope.countryIdText= {id: 2, name: 'Canada'}; $scope.countries = [
    {id: 1, name: 'USA'},
    {id: 2, name: 'Canada'},
    {id: 3, name: 'Maxico'},
    {id: 4, name: 'Siriya'},
    {id: 5, name: 'Bulgaria'}
 ];
});

/* HTML code */            
<select ng-model="countryId"               
        ng-options="x.id as x.name for x in countries"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose Country --</option>
</select> 

There nothing complicated to explain, if you want to sort the countries while binding, we will add orderBy:'name' see the complete html

<select ng-model="countryId"               
        ng-options="x.id as x.name for x in countries | orderBy:'name'"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose Country --</option>
</select> 

Bind dropdown with value text and post both

In above example we saw how to bind both value and text and post only Id, but due to some reasons we want to post both value as well as text then we need to change the binding a little bit, we will use the same list of countries which we used above, see in action:

/* Controller code */
$scope.countryIdText= {id: 2, name: 'Canada'}; 

/* HTML code */              
<select ng-model="countryIdText"               
        ng-options="x as x.name for x in countries track by x.id"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose Country --</option>
</select> 

Now every time it will post {id: 2, name: 'Canada'}, If you want to read Id and text one by one then use

$scope.countryIdText.id
$scope.countryIdText.name

Bind dropdown with value text & role and post all the three

Suppose we have a user list with three properties to bind in dropdown/select, Id, Name and Role. On post we want to capture all the three values from the dropdown/select due to any reason. We will created hard-coded values here, see this

/* Controller code */
$scope.user = {id: 2, name: 'Arron', role: 'Analyst'};
$scope.users = [
    {id: 1, name: 'Ahmad', role: 'Admin'},
    {id: 2, name: 'Arron', role: 'Analyst'},
    {id: 3, name: 'Robert', role: 'Guest'},
    {id: 4, name: 'Baldwin', role: 'Admin'},
    {id: 5, name: 'Azure', role: 'Viewer'}
  ]; 

/* HTML code */ 

<select ng-model="user"               
        ng-options="x as x.name for x in users track by x.id"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose User --</option>
</select> 

On post our user variable on the scope will have all the properties, easily we can read it

var id = $scope.user.id
var name = $scope.user.name
var role = $scope.user.role

Bind dropdown with Formatted text say (Id: Text Role)

Some time we need to show the text in dropdown from different fields, the same we are going to see in this example.

<select ng-model="user"               
        ng-options="x as (x.id + ': ' + x.name + ' [' + x.role + ']') for x in users track by x.id"
        class="form-control" 
        ng-required="true">
  <option value="">-- Choose User --</option>
</select> 

For live demo you can check this

Other blogs you may like

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to... By Ali Adravi   On 14 Aug 2015  Viewed: 20,960

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change... By Ali Adravi   On 06 Aug 2015  Viewed: 57,794

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the... By Ali Adravi   On 29 Jul 2015  Viewed: 19,751

Custom Directives in AngularJS with example and demo

Angularjs custom directives are the common to avoid the duplicate code, it is easy powerful and really nice. There are already too many directive have been created by experts but as a developer we need to write our own to achieve our specific goal. ng-model, ng-if, ng-show, ng-repeat all these are... By Ali Adravi   On 29 Jul 2015  Viewed: 4,498

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We... By Ali Adravi   On 28 Jul 2015  Viewed: 31,486