Posts
33
Comments
135
Trackbacks
0
June 2015 Entries
Angular JS - adding Options dynamically to Select drop down box
You can create options elements of <select> dynamically using Angular.

An example of it with various options like grouping options or disabling few are also available.

<html>
  <head>
    <script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script type="text/javascript">
  angular.module("app", []).controller("myController", ["$scope", function($scope) {

    $scope.OptionArray = [{
      text: "Mumbai",
      id: 1,
      Country: "India"
    }, {
      text: "London",
      id: 1,
      Country: "UK"
    }, {
      text: "Perth",
      id: 1,
      Country: "Australia"
    }, ]

    $scope.optionSelectedOne = 2;
  }]);
    </script>
  </head>

  <body ng-app="app" ng-controller="myController">

      <select ng-model="optionSelectedOne" ng-options="obj.id as obj.text group by obj.Country disable when obj.Country == 'Australia' for obj in OptionArray">
      <option value="">Please Select Country</option>
    </select>
  </body>

</html>

The output of this would look like the following  - 


Posted On Sunday, June 14, 2015 3:31 PM | Comments (2)
AngularJS - Basics
I have recently been learning AngularJS by myself through online documentation. No Wonder it is so popular, its just WOW.  It's sop much easier to work and not to worry about two-way binding. Angualr JS takes care of it automatically for us. You don't need any framework or installations to get started working with AngualrJS. 

It makes life so much easier building SPA(Single Page Applications). 

All you need to do to get up and running on Angular JS is - 
  • Download AngularJS library from Google official site and reference it from your page using Script tag or you can directly reference to the CDN location instead of downloading it. At the time of writing this post, the latest version currently Live was 1.4 with alpha testing on for 2.0 version.
  • Put ng-app tag inside the area in HTML which you want to be handled and controlled by AngualarJS. All this does is bootstrap Angualr and tells it to take the control of designated area. All the directives, controllers and template are evaluated and controlled by Angular. 
  • Go to the Scripts and create an Angular module using javascript. A module is abstraction which acts as a container for a related functionality. So all related directives and controllers belong to the module. You can have multiple module inside the application grouped by functionality. But,a page can be assigned to only single module. 
Syntax for creating module.

angular.module("moduleName",[]);

The first parameter is the name of the module. The second parameter is the dependencies on which this module depends. This is the Dependency Injection pattern of Angular. You provide the dependencies as a parameter to the constructor. This is also called constructor injection.

Once created you use this module to add controllers, filters or custom directives. 

You will typically mark either <html> or <body> tag with ng-app and supply the created module name to it for Angular to take control of that section of page.

<html>
<head>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
</head>
<body  ng-app="moduleName">
{{2+3}}
</body>
</html>

the page when opened in browser would display 5. 

The expression inside the interpolation expression or template will get evaluated by Angular.

This is just very basic example of Angular and doesn't display all the capabilities of it. In coming days I'll cover few more posts about it.
Posted On Sunday, June 14, 2015 2:02 PM | Comments (1)