Bind Dropdown in Aurelia

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 609 red flag
Rating: 5 out of 5  
 1 vote(s)

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. A dropdown allows a user to select a value from a series of options. In this article, we will look into how to bind a dropdown in Aurelia.


 Download source code for Bind Dropdown in Aurelia

Recommendation
Read Getting Started with Aurelia before this article.

Introduction

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. A drop down allows a user to select a value from a series of options. In this article, we will look into how to bind a drop down in Aurelia.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Straight to Experiment

(A) Populate a drop down

At first, let us create a folder say dataSource under the src folder. Now let us create a countries-list.js file with the following content

countries-list.js
-----------------
export default [
  {
    "CountryID": "1",
    "CountryName": "India"
  },
  {
    "CountryID": "2",
    "CountryName": "USA"
  },
  {
    "CountryID": "3",
    "CountryName": "Canada"
  },
  {
    "CountryID": "4",
    "CountryName": "Sweden"
  }
];

As a second step, we need to first import the countries-list.js file as the data source for our application. For that reason, let us write the below code in our app.js file.

app.js
---------
import countries from './dataSource/countries-list';

export class App {
  
  constructor() {

    this.countryCollection = countries;
 
  }  
}

The program is very simple. At first, we are importing the countries-list.js file as the data source for our application by using the import statement and storing it into a variable countries. We have captured the countries value and assigned it to the countryCollection property inside the Constructor of the App class.

Now let's open the app.html file and write the below template

app.html
---------
<template>
<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>
  <select>
        <option value="">-Choose Country-</option>
        <option value="${country.CountryID}"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>
</template>

The purpose of Repeat.for is to iterate over objects. After we iterate the countryCollection array, we have bind the ${country.CountryID} property as the ID field of the Drop down and display ${country.CountryName} property as the value.The result is as under

(B) Choose Selected Id from drop down

In this case we are going to choose the selected id from the drop down. For this let us include a property say selectedCountryId and set it to null in app.js as under

app.js
------
import countries from './dataSource/countries-list';

export class App {
  
  constructor() {

    this.countryCollection = countries;

    this.selectedCountryId= null; 
  }  
}

The corresponding app.html will be changed to

app.html
----------
<template>
<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>
  <select value.bind="selectedCountryId">
        <option value="">-Choose Country-</option>
        <option value="${country.CountryID}"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>
    <p>Selected Country Id: ${selectedCountryId}</p>
</template>

The result

(C) Select both ID and Text from drop down

This is a little tricky. First let us perform the change in the app.js as under

app.js
---------
import countries from './dataSource/countries-list';

export class App {

  constructor() {

    this.countryCollection = countries;

      this.selectedCountry= null; 

    }  
}

The corresponding app.html will be changed to

app.html
----------
<template> 

<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>

  <select value.bind="selectedCountry">
        <option model.bind="null">-Choose Country-</option>
        <option model.bind="country"                
                repeat.for="country of countryCollection">${country.CountryID} - ${country.CountryName}
        </option>
    </select>
    
    <p>Selected Country: ${selectedCountry.CountryID} - ${selectedCountry.CountryName}</p>
</template>

We are binding the selectedCountry property in the select

<select value.bind="selectedCountry">

And we are binding the entire country object in the

option model.bind="country"

The result

Reference

Binding: Basics

Conclusion

In this article we have learnt the drop down filling and selected items from the same using Aurelia. Hope this will be useful. Thanks for reading. Zipped file attached.

Recommendation
Read Instant Database Changes Using SignalR after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)