Easy Code Stuff: ng-model

Showing posts with label ng-model. Show all posts

Dec 15, 2015

Creating A Table In AngularJS With Filters

In This Article I'm Going To Explain You Guys About Creating A Table In AngularJS Using Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Lets Start From The Bottom. Below Codes Give A Simple Table.

<html>
  <body>
    <table border="1">
      <tr>
         <th>Name</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
        <td>158</td>
         <td>Nifal</td>
         <td>25</td>
      </tr>
      <tr>
        <td>122</td>
        <td>Dinesh</td>
        <td>24</td>
      </tr>
      <tr>
        <td>133</td>
        <td>Asjad</td>
        <td>21</td>
      </tr>
      <tr>
        <td>134</td>
        <td>Hudhaifa</td>
        <td>22</td>
      </tr>
      <tr>
        <td>165</td>
        <td>Gowtham</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

Lets See How We Can Create Above Table With AngularJS Code Along With A Data Array Which Contains Array Of Students. First Of All I'm Creating A Controller Which Gives The Students Object Array.

var app = angular.module('myApp', []);
app.controller('StudentController', function ($scope) {
    $scope.Students = [
          { Id: 158, Name: "Nifal", Age: 25 },
          { Id: 122, Name: "Dinesh", Age: 24 },
          { Id: 133, Name: "Asjad", Age: 21 },
          { Id: 134, Name: "Hudhaifa", Age: 22 },
          { Id: 165, Name: "Gowtham", Age: 24 }
      ];
});

Now Lets Use This Controller And Bind It To The Table Using AngularJS Repeat And Expressions.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th>Id</th>
           <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students">
          <td>{{Student.Id}}</td>  
          <td>{{Student.Name}}</td>
          <td>{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
           { Id: 158, Name: "Nifal", Age: 25 },
           { Id: 122, Name: "Dinesh", Age: 24 },
           { Id: 133, Name: "Asjad", Age: 21 },
           { Id: 134, Name: "Hudhaifa", Age: 22 },
           { Id: 165, Name: "Gowtham", Age: 24 }
         ];
        });
    </script>
  </body>

Lets Say, You Want To Print The Row Number In The Table. In Order To Do That You Can Use The Table Index ($index). Just Treat The Index As A Variable And Bind It. Normally Index Starts With Zero. So Add One To It.

1	<td>{{$index + 1}}</td>

Lets Say, You Want To Style The Table By Giving Different Colors To Table Rows. You Can Use $even And $odd To Do That. Use AngularJS If Condition(ng-if) To Do That.

<tr ng-repeat="Student in Students">
  <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
  <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
  <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
  <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
</tr>

You Can Use Filters As You Wish When You Looping Through It. Lets Say, You Want To Order The Table Data Using Students Age. Use "orderby" Filter.

1	<tr ng-repeat="Student in Students \| orderBy : 'Age' ">

See The Full Code Below, Which Used All The Things We Discussed Above.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students | orderBy : 'Age' ">
          <td ng-if="$odd" style="color:red">{{$index + 1}}</td>  
          <td ng-if="$even" style="color:blue">{{$index + 1}}</td>  
          <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
          <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
          <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
          <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
                { Id: 158, Name: "Nifal", Age: 25 },
                { Id: 122, Name: "Dinesh", Age: 24 },
                { Id: 133, Name: "Asjad", Age: 21 },
                { Id: 134, Name: "Hudhaifa", Age: 22 },
                { Id: 165, Name: "Gowtham", Age: 24 }
            ];
        });
    </script>
  </body> 
</html>

Hope You Enjoyed The Article.

Dec 10, 2015

Binding Data To HTML Drop Down Using AngularJS With Defaults

In AngularJS, You Will Find Few Ways To Create Drop-downs. Lets Start From The Beginning. Lets See How Simple Drop-down Going To Be.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
      <span>Customer Name</span>
      <select>
        <option value="1">Nifal</option>
        <option value="2">Dinesh</option>
        <option value="3">Asjad</option>
        <option value="4">Hudhaifa</option>
        <option value="5">Gowtham</option>
      </select>
    </div>
  </body> 
</html>

If You See The following Code In The Browser You Will Get A Simple Drop Down. Lets Use AngularJS To Create The Drop-down. In This Example I'm Going To Show You, Two Different Ways To Do This. First Is By Using "ng-repeat". Lets Start Doing It. In Order To Get The Names I Will Be Using A "ng-controller".

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
          { Id: 1, Name: "Nifal" },
          { Id: 2, Name: "Dinesh" },
          { Id: 3, Name: "Asjad" },
          { Id: 4, Name: "Hudhaifa" },
          { Id: 5, Name: "Gowtham" }
      ];
});

Now Lets Use This Controller And Create Drop-down. In Order To Build The Drop-down I'm Looping Through The "Customers" Array In The "<option>" Tag. In Order To Bind The Value & Text To The "<option>" Tag I'm Using AngularJS Expression.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select>
        <option ng-repeat="Customer in Customers" value="{{Customer.Id}}">
          {{Customer.Name}}
        </option >
      </select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. Now Lets See How We Can Improve Our Drop-down Using AngularJS "ng-options". In This Method We Won't Use "ng-repeat". In The "<select>" Tag It Self We Should Use "ng-options" To Load The Drop-down.

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers"></select>

If You Run The Above Code You Won't Get The Drop-down. But If You Inspect Element, You Will See Your "<select>" Tag. But You Won't Get Options In It. Even After Using "ng-options", You Have To Specify The "ng-model".

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>

Lets See The Full Code.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. But With A Blank Option Like Below.

This Is Happening Because, "ng-options" Will Check For The "ng-model"s Value. But Its Empty. You Can Overcome By Giving A Value To Your Model In The Controller.

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
         { Id: 1, Name: "Nifal" },
         { Id: 2, Name: "Dinesh" },
         { Id: 3, Name: "Asjad" },
         { Id: 4, Name: "Hudhaifa" },
         { Id: 5, Name: "Gowtham" }
      ];
    $scope.MyCustomer = 3;
});

Hope You Enjoyed The Article.

Check My Next Article About AngularJS Tables.

Dec 2, 2015

Quick Start To AngularJS Controllers

In AngularJS Controllers Are Java Script Objects.Controllers use To Control The Data In AngularJS Application. In Order To Define The Directive Controller We Have Use The "ng-controller".

To Define Controller We Have To Use The Below Directive.

ng-controller="myController"

Lets Start From The Beginning. Below Codes Uses "ng-init" To Define Variables.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="FName='Nifal'; LName='Nizar'; Qty=2; Price=100">
        <span>Customer Name: {{ FName+ " " + LName}}</span>
        <br/>
        <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
  </body>
</html>

Lets Use A Controller To Get These Details To Our AngularJS HTML Bindings. I'm Going To Name My "ng-app" As "myApp" And "ng-controller" As "myController". So My <div> Going To Be Like Below.

1	<div ng-app="myApp" ng-controller="myController">

So Lets Create A Our Controller Called "myController". This Is Going To Be In Script Section. According To The Developer Practices, There Are Many Ways To Define Controllers. So Lets Have Simple Way Of It.Now Lets Use The Most Basic Way To Create Controller. It's Very Simple

1
2
3

function myController($scope) {

};

According Above Declaration "myController" Is A Simple Function. But It's Takes "$scope" Object As Parameter. You Can Pass Many More Objects, Like "$http" And All. But Now Will Only Go With "$scope".

"$scope" Is The Application Object In AngularJS, Which Contains The Variables And Methods. Now We Will Add All Our Variables, Which We Have Initialized In The "$scope". So Lets Finish The Codes.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController">
      <span>Customer Name: {{ FName+ " " + LName}}</span>
      <br/>
      <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
    <script type="text/javascript" >
        function myController($scope) {
            $scope.FName = 'Nifal';
            $scope.LName = 'Nizar';
            $scope.Qty = 2;
            $scope.Price = 100;
        }
    </script>
  </body> 
</html>

Now Run And Happy.

Customer Name: Nifal Nizar
Invoice Total: 200

That Was A One Define Controller. But That Is Not A Good Practice. Lets Do In A More Modular Approach. First Of All We Have To Define The Module. Then We Will Add The Controller To It.

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
});

Now Lets See Another Way Of It. In This Way Will Define Controller Separately And Then Add It To The Application.

var app = angular.module('myApp', []);
function myController($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};
app.controller('myController', myController);

Now Lets See Another Way Of It. In This Way We Will Create A Variable Called "controllers" And We Add All The Controllers To It. Later We Will Add This Controller Variable To The Application.

var app = angular.module('myApp', []);
var controllers = {};

controllers.myController = function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};

controllers.TvController = function ($scope) {
    $scope.Channel = 'FOX';
};

app.controller(controllers);

Hope You Had Good Start With AngularJS Controllers.

Check My Next Article About AngularJS Drop-downs.

Quick Start With AngularJS Repeat Along With Filters

In This Article I'm Going To Explain You Guys About Using AngularJS Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Hope You Have A Simple Idea About AngularJS And ng-init.If You Are New To These Please Click Here Before Start.

Lets Start With Simple AngularJS Code Along With A Data Array Which Contains Array Of Names.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
    </div>
</body>
</html>

Now Lets Bind These Names Into A Un-Ordered List. ng-repeat Will Loop Through The Array Just Like A Simple For Each Loop In JQuery. So Lets Do It. I Will Loop Through All The Names And Bind It Inside The <li> Tag Using AngularJS Expression.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names">
         {{Name}}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Nifal
Gowtham
Dinesh
Hudhaifa
Sam
Anderson

So We Are Done With ng-repeat. Lets See How We Can Use Filters. Actually What Filters Does Is, Its Return A Subset Of Items From An Array. AngularJS Provides Following Filters To Use.

lowercase : Converts A String To Lower Case.
uppercase : Converts A String To Upper Case.
filter : Selects A Subset Of Items From An Array.
orderby : Order The Array Elements By Using Given Expression.
currency : Formats A Number Into Currency.

Lets Use These Filters. I'm Going To Make All The Names To Upper Case Now By Using Following Expression.

1	{{ Name \| uppercase }}

If You Want To Make It Lowercase Simply Use Replace The "uppercase" With "lowercase".

1	{{ Name \| lowercase }}

Lets See How We Can Use Filters.This Is How We Create Strings In AngularJS. For That I'm Using A Text Field To Enter The Filter Text.

1	Filter Text: <input type="text" ng-model="FilterText">

Lets Apply This Filter To Our Code.

1	ng-repeat = "Name in Names \| filter:FilterText"

Lets See Our Full Code.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="">
    Filter Text: <input type="text" ng-model="FilterText">
    <div ng-init="Names=['Nifal','Gowtham','Dinesh','Hudhaifa','Sam','Anderson']">
     <ul>
       <li ng-repeat = "Name in Names | filter:FilterText">
         {{ Name | uppercase }}
       </li>
     </ul>
   </div>
  </body>
</html>

If You See This In Browser You Will Get The Following Output.

Hope You Had Good Knowledge About AngularJS Expressions And Variables.

Check My Next Article About AngularJS Controllers.

Nov 28, 2015

My First AngularJS Application

AngularJS is a JavaScript Library which helps us to create a single page application very easily using data binding technology. To start learning Angular, you should have good knowledge about JavaScript and JQuery. One thing you need to understand is this is not an alternative for JQuery or anything. It is another data binding framework such as KnockoutJS.

First of all to start download the AngularJS Library from their website or else you can reference to the online library which is shown below. But make sure you always reference to a latest stable version of it.

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Initially to start first take a simple idea about following AngularJS directives.

ng-app : This defines the AngularJS application.
ng-model : This binds the value of HTML control to the AngularJS application data.
ng-bind : This binds the AngularJS application data to the HTML controls.

Lets Start Developing Our Simple AngularJS Application. In This Application Ill Have A Text Field To Enter The Name. The Text Which I Enters Will Come With "Hello ".

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    Name: <input type="text">
    <br/>
  </body>
</html>

Now I Should Tell Angular To Treat This Page As An Angular Application. In-order To That Use The "ng-app" Directive. As We Are In The Begining Of The Application I Will Define It In My <Body> Tag.

If You Want Give An Application Name To It. But It's Not Important Right Now. Because We Wont Be Doing All Controllers And Stuff In This Article. If You Want Make It Like HTML5 Attribute.

Use Any Of The Following Ways To Define You Application.

1	<body ng-app>

1	<body ng-app="">

1	<body data-ng-app="">

Now Lets Define A Model For The Name.

1	Name: <input type="text" ng-model="name">

You Can Use Any Name For The Model. But In The Application You Have To Use The Same Model Name. So Give A Meaningful Name.Lets Bind The Data To A Tag.

1	<span ng-bind="name"></span>

Lets See The Full Code Now.

Name: