Options list with angular.ui bootstrap

I recently need to generate an options list, which is queried before from database.
This is common practice in web / application development, where system provide the value for the options which is created by admin of the application.

So in angularJS all purely javascript, we can use for loop, but takes time. We are smart developer right?
Here how I did this using angular.ui.bootstrap component .


We assume the data will be :

var categories = ['red','green','blue'];

The data will be generated from your database. How to generate it using REST, is out of the topic for now.

And in the view :

  <select name="label" id="label" data-ng-model="article.label" data-ng-options="cat for cat in categories"> </select>

This will generate the select options :

<select >

  <options value=0> red</options>

  <options value=1> green</options>

  <options value=2> blue</options> 

</select>

The hardwork done by the data-ng-options directive of angular.ui.bootstrap.

This save around 15 minutes of coding I think, with just 1 line of code to generate the options, and plus it done in client side, the BROWSER. Not in server anymore mamen. Welcome to the real thin client distributed computing a.k.a Browser apps.

Your server only handle the database operation via REST api for more scalability.

Go to the next level, see you on other articles.

Posted in: AngularJS