ng-checked with an example


ng-checked : This directive sets the checked attribute of a checkbox/radiobutton. It will check for the expression in the ng-checked attribute which is mapped with the ng-model in the "check all" checkbox. It is supported by <input> elements of type checkbox / radio.


ng-change with an example


ng-change - This directive operates like jQuery's change event listener (onChange). It requires a ng-model directive in the element. The ng-change event is triggered at every change in the value or while adding value in the input box it will not check for all the values inserted, it will occur whenever there is a change in the inputbox. Please check the below example :


ng-bind with example


c) ng-bind - The ng-bind directive will notify AngularJS to update the content of an HTML element with the value provided in the application scope variable.
   Different types of bindings :
1) One way binding using ng-bind
Example : 
         Controller :
          var app = angular.module('store', []);
app.controller('myStore', function($scope) {
     $scope.stname = "Van husen";
     $scope.staddress = "Germany";
   });

         view : <p ng-bind="stname"></p>
2) Two way binding using ng-bind
Example :
        View :
        <div ng-app="store" ng-controller="myStore">
        Name: <input ng-model="stname">
        <h1>{{stname}}</h1>
        </div>
        <a ng-click="getvalue"></a>

       Controller :
  var app = angular.module('myApp', []);
  app.controller('myStore', function($scope) {
         $scope.stname = "Van husen";
          $scope.staddress = "Germany";
           $scope.getvalue = fucntion(){
              console.log($scope);
              }
  });


ng-init with example


b) ng-init - It initializes the variable in the app. ng-init will not create a new scope, it adds an expression in the current scope. To create  seperate scope use ng-controller

   For ex:
   Controller :
store.controller('ListController', function($scope) {  
});


   To add expression in the same scope using ng-init :

    <div ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> | <a href=""ng-click="model.score=  '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
      </div>


    To create seperate scope using ng-init :

     <div ng-controller="ListController" ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> |  <a href="" ng-click="model.score = '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
    </div>

ng-app with example


a) ng-app - It will tell the AngularJS that this is the root element of the application. ng-app will be set in the index.html page which is the default HTML page of the application where the <html> </html> tags starts or in the <body></body> element, Only one ng-app directive can be set to a element if more then one is detected when the library load then the first occurrence will be set as root element. When the Angular Js library loads it will check the ng-app directive and set the $rootScope to the ng-app element.
 Example :   
   1) ng-app in HTML tag    
   <html ng-app="store">  
   
   2) ng-app in the body tag
   <body ng-app="store">

 Code Explanation : "store" is the name of the app. you need to use the app name in your entire application.
 For ex: 
  1) store.controller('LoginController', function() {  
}); 

  2) store.filter('HTMLparser', function() {  
});

Angular JS Directives with example


List of Angular js Directives with examples :

a) ng-app - It will tell the AngularJS that this is the root element of the application. ng-app will be set in the index.html page which is the default HTML page of the application where the <html> </html> tags starts or in the <body></body> element, Only one ng-app directive can be set to a element if more then one is detected when the library load then the first occurrence will be set as root element. When the Angular Js library loads it will check the ng-app directive and set the $rootScope to the ng-app element.
 Example :   
   1) ng-app in HTML tag    
   <html ng-app="store">  
   
   2) ng-app in the body tag
   <body ng-app="store">

 Code Explanation : "store" is the name of the app. you need to use the app name in your entire application.
 For ex: 
  1) store.controller('LoginController', function() {
});

  2) store.filter('HTMLparser', function() {
});


b) ng-init - It initializes the variable in the app. ng-init will not create a new scope, it adds an expression in the current scope. To create  seperate scope use ng-controller

   For ex:
   Controller :
store.controller('ListController', function($scope) {
});


   To add expression in the same scope using ng-init :

   <div ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> | <a href=""ng-click="model.score=  '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
      </div>


    To create seperate scope using ng-init :

     <div ng-controller="ListController" ng-init="model = { score: '204'}">
      <a href="" ng-click="model.score = '204'">204</a> |  <a href="" ng-click="model.score = '105'">105</a>
      <div>Display {{ model.score }}</div>
      <hr />
    </div>

c) ng-bind - The ng-bind directive will notify AngularJS to update the content of an HTML element with the value provided in the application scope variable.
   Different types of bindings :
1) One way binding using ng-bind
Example : 
         Controller :
          var app = angular.module('store', []);
app.controller('myStore', function($scope) {
    $scope.stname = "Van husen";
    $scope.staddress = "Germany";
  });

         view : <p ng-bind="stname"></p>
2) Two way binding using ng-bind
Example :
        View :
        <div ng-app="store" ng-controller="myStore">
        Name: <input ng-model="stname">
        <h1>{{stname}}</h1>
        </div>
        <a ng-click="getvalue"></a>

       Controller :
  var app = angular.module('myApp', []);
 app.controller('myStore', function($scope) {
        $scope.stname = "Van husen";
        $scope.staddress = "Germany";
           $scope.getvalue = fucntion(){
              console.log($scope);
              }
 });

Using filter for HTML parsing in Angular js


1) Include sanitize library :

 Url : https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.js

2) Add below code in the app.js file so that filter is avialable across the whole application :

app.filter('parseHTML', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

3) Using filter in the views :

<span ng-bind-html="feed.long_desc | parseHTML">{{feed.long_desc}}</span>