Skip to main content

Posts

ng-switch ng-switch-when

01 02 03 04 05 06 07 08 09 10 11 <div ng- switch on= "account.status" >      <div ng- switch -when= "A" >          <img class= "statusIcon" src= 'apps/index/Adot.png' />      </div>      <div ng- switch -when= "B" >          <img class= "statusIcon" src= 'apps/index/Bdot.png' />      </div>      <div ng- switch -when= "C" >          <img class= "statusIcon" src= 'apps/index/Cdot.png' />      </div> </div> <div ng-switch on="account.status"> <div ng-switch-when="A"> <img class="statusIcon" src='apps/index/Adot.png' /> </div> <div ng-switch-when="B"> <img class="sta...
Read more

How to bind selection box with options in AngularJs?

In angularjs, we are using the ng-options directive to display the selection. Hello everyone, I am going to share the code-sample for binding  country selection and after selected to country bind the cities behalf  of the selected  country. The example in detail as given below. Live demo example, go to below link http://embed.plnkr.co/Ru5phHLr6TIeazOeObmU/preview . 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 //The Countries CitiesList JSON [{          "code" : 1,          "country" : "India" ,          "cities" : [ "New Delhi" , "New Ashoknagar" ]   }, {          "code" : 2,          "country" : "Nepal" ,          "cities" : [ "Lumbini" ,   "Lumbini" ...
Read more

AngularJs looping over collection items

In the angularjs, The  ng-repeat   directive are used to complete the function of loop.  The example code are given below. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 <!DOCTYPE html> <html> <head lang= "en" > <script type= "text/javascript" src= " https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js " ></script> <script>   function Main($scope) {      $scope.getWelcomeEntities = function () {             return [{ Name: 'for a loop in Angular JS.' }];    };      }; </script> </head> <body ng-app>      <div ng-repeat= "item in getWelcomeEntities()" >          code sample {{item.Name}}      </div> </body...
Read more

How to show/hide buttons in AngularJs?

In AngularJs, we can show and hide the div using ng-sh ow and ng-disabled directives. Which are given below. ng -show  directive {{  This  directive  is used to show the div  }} ng-disabled  directive {{  This directive  is used to show the div  }} The AngularJs code example 1 2 3 4 var $scope; var app = angular.module( 'myapp' , []); function myControl($scope) { } var $scope; var app = angular.module('myapp', []); function myControl($scope) { } The live example code  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html> <head lang= "en" > <script type= "text/javascript" src= " https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js " ></script> <script>      var $scope;      var app = an...
Read more

angularjs initialize options on page load

In angularjs, the  ng-init  attribute are used to initialize the data on page load. The AngularJs code sample 1 2 3 4 5 6 7 var app = angular.module( "myApp" , []); app.controller( "MyController" , [ '$scope' , function ($scope) {      $scope.data = {          dosomethig: 'put ant thing here'      } }]); var app = angular.module("myApp", []); app.controller("MyController", ['$scope', function ($scope) { $scope.data = { dosomethig: 'put ant thing here' } }]); The example as given below. 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <! DOCTYPE html> <html> <head lang= "en" >      <script type= "text/javascript" src= " https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js " ></script>    ...
Read more

Auto bootstrap process in angularjs

01 02 03 04 05 06 07 08 09 10 <!doctype html> <html ng-app= "myApp" > <body>      Result of Auto Bootstrapping {{ 4+2 }}.      <script src= "angular.js" ></script>      <script>          var formApp = angular.module( 'myApp' , []);      </script> </body> </html> <!doctype html> <html ng-app="myApp"> <body> Result of Auto Bootstrapping {{ 4+2 }}. <script src="angular.js"></script> <script> var formApp = angular.module('myApp', []); </script> </body> </html>
Read more

What is $scope in Angularjs?

A $scope is a JavaScript object. The $scope working between the DOM elements and controller both.  The main role of $scope is to ties the DOM elements that is view to controller.     For Example, Just like MVC [Model-View-Controller], The model work between the view and controller and the Model ties the DOM element/view to controller. The AngularJs code for $scope with ng-controller var app = angular.module( "myApp" , []);   app.controller( "MyController" , [ '$scope' , '$http' , function (key, val) {      console.log(key);      console.log(val); }]);   app.directive( "myDirective" , function ($http, $parse) {      return {          link: function ($scope, scope, attrs) {              alert($scope);          }      } }); ...
Read more

What are Directives in AngularJs?

In Angularjs, The HTML attributes and binding controls are called directives. All HTML attributes attached with prefix "ng-". The directives are Basic Directives ng-app  : this is used for initializes to application ng-init   :  this is used for  initialize to application data ng-model  :  this is used for  binds HTML controls to application data ng-Controller  :  this is used for  Attached a controller class to view. Others then basic Directives ng-repeat  :  this is used for  bind to repeated an HTML elements ng-if  :  this is used for  bind an HTML elements with condition ng-grid  :  this is used for  bind data collection to an HTML elements ng-show  :  this is used for  Show the HTML elements ng-hide  :  this is used for  Hide the HTML elements ng-class  :  this is used for  CSS binding class ng-src ...
Read more

differences between $resource and $http

The $resource is a RESTful wrapper around the $http that takes out all of the manual work needed when using $http.  The $ resource returns a resource object that has all the RESTful methods. The $ http will use to making a GET request for a JSON calls.
Read more