Populating Angular Drop Down from JSON Result

AngularJS is a very popular framework, with exposure to mobile app markets on the rise. Knowing the framework will take time, but knowing a few basics never hurt you either. I have been working with Ionic lately in the quest to create a mobile application for iPhone and Android, more on that later. There have been some bumps along the way that I wanted to share with you. This post will the first of many to come regarding Angular and its many ways of making life easier.

Let’s first start with a basic drop down, that we are all familiar with in HTML:

<select>
 <option value="pizza">Pizza</option>
 <option value="pie">Pie</option>
 <option value="food">Food</option>
 <option value="soda">Soda</option>
</select>

This is how you would do a normal drop down, but in Angular, things a bit different.

In HTML you have an element

<select></select>

An option tag, which is where all the data for the drop down is stored. You can have as many options as you would like. That is pretty much it for HTML, but what if you want to load dynamic content from JSON? Angular to the rescue.

<option></option>

Angular can load data asynchronously from a web call and change the data dynamically. There fewer steps involved, as we will see in a few minutes. Let’s first make sure we load in our angular JavaScript file, add this to the head of your HTML file

[HTML][/HTML]

This will load before anything on the page and make it available to your application. Create another file called app.js and add it below the previous line, it should look something list this.

[HTML][/HTML]

This is where we will have all of our Angular code. Now open the app.js file in your favorite code editor, I use Sublime Text. Then type the following on the first line:

var myApp = angular.module('myApp',[]);

Then we are going to add a controller module to the code that will tell the app what to do.

function MyCtrl($scope) {

$scope.foods = {
food: ['pizza', 'pie', 'food', 'soda']
};
}

Basically, this defines a function MyCtrl and passes in $scope from Angular. Within the scope we define a variable foods which is set to an object and within that object is a food array, which contains for food elements.

Now we must load the controller in our HTML and link the drop down to the foods variable. In the body type the following:

<div ng-controller="MyCtrl">
<select>
<option ng-repeat="food in foods.food">{{ food }}</option>
</select>
</div>

The div will contain our drop down and when the div loads, MyCtrl will load and instantiate the foods variable. Next we define the <select></select> element then we write one <option></option> element. In the option element we have a directive ng-repeat. ng-repeat defines a local food container that we will use to repeat the food array. We get to the food array by setting ng-repeat to food in foods.food. Once this is defined, we have to tell Angular what to display within food, with this example, it is simple, we will tell it to display food, since we do not have any other defined.

You can see a working model here: https://jsfiddle.net/nyneaxis/x8ou138s/2/

About bwilson 36 Articles
Mobile device specialist currently working as a system analyst, building out an IT infrastructure. I currently focus much of my work on relational databases as well as frameworks. The goal of my work is to continually improve processes and efficiencies.

Be the first to comment

Leave a Reply

Your email address will not be published.


*