Example on Elements and Event Directives in angular.js – Part 3


Elements and even directives in angular.js

Example of element VISIBILITY:​​ 

Below code is for the above example :
<!DOCTYPE​​ html>

 

<html​​ ng-app="DotNetMindsElementsandEventDirectives">

<head>

 ​​ ​​ ​​​​ <title>Directives</title>

 

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap-theme.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <script​​ src="../Scripts/angular.js"></script>

 

 ​​ ​​ ​​​​ <script>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ angular.module("DotNetMindsElementsandEventDirectives", [])

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .controller("eventCtrl",​​ function​​ ($scope) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.todoList = [

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Milk", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Vegies", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Dresses", complete:​​ true​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy some crockery", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Staples", complete:​​ false​​ }];

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ </script>

 ​​ ​​ ​​​​ <!-- position-based CSS selectors -->

 ​​ ​​ ​​​​ <style>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ td​​ >​​ *:first-child​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ font-weight:​​ bold;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​​​ </style>

 ​​ ​​ ​​​​ <style​​ type="text/css">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ th​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ #4CAF50;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ color:​​ white;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ text-align:​​ left;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr:nth-child(even)​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background:​​ #CCC;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr:nth-child(odd)​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background:​​ #FFF;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ </style>

</head>

<body>

 ​​ ​​ ​​​​ <div​​ id="todoPanel"​​ class="panel"​​ ng-controller="eventCtrl">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h3​​ class="panel-header">Shopping List</h3>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="checkbox well">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input​​ type="checkbox"​​ ng-model="todos[2].complete"​​ />

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Item 3 is complete

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​​​ 

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <table​​ class="table">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr><th>#</th><th>Action</th><th>Done</th></tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr​​ ng-repeat="item in todoList">

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.action}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span​​ ng-if="!item.complete">(Incomplete)</span>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span​​ ng-if="item.complete">(Done)</span>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </table>

 ​​ ​​ ​​​​ </div>

</body>

</html>

 

Understanding Transclusion in AngularJS

1) elements are hidden and not removed, the result is

inconsistent striping (ng-hide="item.complete")-->

 

2) Can ng-if solve the problem? (looks like)

Ans: No

​​ Reason: can’t use the ng-if directive on the same element as the ng-repeat directive

 ​​​​ <tr ng-repeat="item in todoList" ng-if="!item.complete"> is not allowed

 ​​ ​​ ​​ ​​ ​​ ​​​​ because : ng-repeat and ng-if directives rely on a technique called transclusion which means : both directives want to modify the child elements and AngularJS doesn’t know how

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ to allow both to do so.

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 1)​​ <tr​​ ng-repeat="item in todos"​​ ng-hide="item.complete">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 2<tr ng-repeat="item in todos" ng-if="!item.complete"> <!-- not allowed -->​​ 

Solution :

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 3)<tr​​ ng-repeat="item in todos | filter: {complete: 'false'}">​​ <!--use filters -->

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.action}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.complete}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 

Example of Table stripped problem with ng-hide in angular.js :

<!DOCTYPE​​ html>

<html​​ ng-app="DotNetMindngHidesApp">

<head>

 ​​ ​​ ​​​​ <title>Directives</title>

 

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap-theme.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <script​​ src="../Scripts/angular.js"></script>

 

 ​​ ​​ ​​​​ <script>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ angular.module("DotNetMindngHidesApp", [])

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .controller("ngHideCtrl",​​ function​​ ($scope) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.todoList = [

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Milk", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Vegies", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Dresses", complete:​​ true​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy some crockery", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Staples", complete:​​ false​​ }];

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ </script>

 ​​ ​​ ​​​​ <style>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ td​​ >​​ *:first-child​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ font-weight:​​ bold;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ th​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ #4CAF50;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ color:​​ white;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ text-align:​​ left;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr:nth-child(even)​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background:​​ #CCC;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr:nth-child(odd)​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background:​​ #FFF;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ </style>

 ​​ ​​ ​​​​ 

</head>

<body>

 ​​ ​​ ​​​​ <div​​ id="todoPanel"​​ class="panel"​​ ng-controller="ngHideCtrl">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h3​​ class="panel-header">Shopping List</h3>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="checkbox well">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input​​ type="checkbox"​​ ng-model="todos[2].complete"​​ />

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Item 3 is complete

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <table​​ class="table table-striped">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr><th>#</th><th>Action</th><th>Done</th></tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 1) elements are hidden and not removed, the result is

inconsistent striping (ng-hide="item.complete")-->

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 2) Can ng-if solve the problem? (looks like)

 ​​ ​​ ​​ ​​ ​​ ​​​​ Ans: No

 ​​ ​​ ​​ ​​ ​​ ​​​​ Reason: can’t use the ng-if directive on the same element as the ng-repeat directive

 ​​ ​​ ​​ ​​ ​​ ​​​​ <tr ng-repeat="item in todoList" ng-if="!item.complete"> is not allowed

 ​​ ​​ ​​ ​​ ​​ ​​​​ because : ng-repeat and ng-if directives rely on a technique called transclusion

 ​​ ​​ ​​ ​​ ​​ ​​​​ which means : both directives want to modify the child elements and AngularJS doesn’t know how

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ to allow both to do so.

 ​​ ​​ ​​ ​​ ​​ ​​​​ -->

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 1)--><tr​​ ng-repeat="item in todoList"​​ ng-hide="item.complete">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 2)-->​​ <!--<tr ng-repeat="item in todos" ng-if="!item.complete"> -->​​ <!-- not allowed -->​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 3) -->​​ <tr​​ ng-repeat="item in todoList | filter: {complete: 'false'}">​​ <!--use filters -->

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.action}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.complete}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </table>

 ​​ ​​ ​​​​ </div>

</body>

</html>

 

Example of managing classes and css in html using angular.js:

 

 

<!DOCTYPE​​ html>

<html​​ ng-app="DotNetMindsApp">

<head>

 ​​ ​​ ​​​​ 

 ​​ ​​ ​​​​ <!-- 1) ng-class directive manages the class attribute of an element​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ ng-style property to set CSS properties directly, rather than through a class

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 2) ng-class-odd and ng-class-even Directives

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ -->

 

 

 ​​ ​​ ​​​​ <title>Directives</title>

 

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap-theme.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <script​​ src="../Scripts/angular.js"></script>

 

 ​​ ​​ ​​​​ <script>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ angular.module("DotNetMindsApp", [])

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .controller("ManagingClassesCtrl",​​ function​​ ($scope) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.todoList = [

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Milk", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Vegies", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Dresses", complete:​​ true​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy some crockery", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Staples", complete:​​ false​​ }];

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ 

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.buttonNames = ["Red",​​ "Green",​​ "Blue"];

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.settings = {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Rows:​​ "Blue",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Columns:​​ "Green"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ };

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ </script>

 ​​ ​​ ​​​​ <style>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr.Red​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightcoral;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr.Green​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightgreen;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ tr.Blue​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightblue;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​​​ </style>

</head>

<body>

 ​​ ​​ ​​​​ <div​​ id="todoPanel"​​ class="panel"​​ ng-controller="ManagingClassesCtrl">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h3​​ class="panel-header">Shopping List</h3>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="row well">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="col-xs-6"​​ ng-repeat="(key, val) in settings">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h4>{{key}}</h4>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="radio"​​ ng-repeat="button in buttonNames">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input​​ type="radio"​​ ng-model="settings[key]"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ value="{{button}}">{{button}}

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <table​​ class="table">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr><th>#</th><th>Action</th><th>Done</th></tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- 1) --> ​​ ​​ ​​​​ <!-- <tr ng-repeat="item in todos" ng-class="settings.Rows"> -->

 ​​ ​​ ​​​​ <tr​​ ng-repeat="item in todoList"​​ ng-class-even="settings.Rows"​​ ng-class-odd="settings.Columns">

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

 ​​ ​​ ​​​​ <td>{{item.action}}</td>

 ​​ ​​ ​​​​ <td​​ ng-style="{'background-color': settings.Columns}">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {{item.complete}}

 ​​ ​​ ​​​​ </td>

</tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </table>

 ​​ ​​ ​​​​ </div>

</body>

</html>

 

Example of Event handling in angularjs :

Screen Below after clicking on Red button :

Screen Below after clicking on green button:

Screen below after clicking on blue button :​​ 

Bow is the code for the above example :​​ 

<!DOCTYPE​​ html>

<html​​ ng-app="DotNetMindsApp">

<head>

 ​​ ​​ ​​​​ <title>Directives</title>

 

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <link​​ href="../StyleTheme/bootstrap-theme.css"​​ rel="stylesheet"​​ />

 ​​ ​​ ​​​​ <script​​ src="../Scripts/angular.js"></script>

 

 ​​ ​​ ​​​​ <script>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ angular.module("DotNetMindsApp", [])

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .controller("EventCtrl",​​ function​​ ($scope) {

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.todoList = [

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Milk", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Get Vegies", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Dresses", complete:​​ true​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy some crockery", complete:​​ false​​ },

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ { action:​​ "Buy Staples", complete:​​ false​​ }];

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.buttonNames = ["Red",​​ "Green",​​ "Blue"];

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.data = {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ rowColor:​​ "Blue",

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ columnColor:​​ "Green"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ };

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //BeWare: Mismatch between the event names

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //that AngularJS uses for the names of the directives and​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ //the value of the type property of the underlying events($event)

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.handleEvent =​​ function​​ (e) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ console.log("Event type: "​​ + e.type);

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.data.columnColor = e.type ==​​ "mouseover"​​ ?​​ "Green"​​ :​​ "Blue";

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ </script>

 ​​ ​​ ​​​​ <style>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .Red​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightcoral;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .Green​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightgreen;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .Blue​​ {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ background-color:​​ lightblue;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ }

 ​​ ​​ ​​​​ </style>

</head>

<body>

 ​​ ​​ ​​​​ <div​​ id="todoPanel"​​ class="panel"​​ ng-controller="EventCtrl">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h3​​ class="panel-header">Shopping List</h3>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="well">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <span​​ ng-repeat="button in buttonNames">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- using inline expression for ng-click -->

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button​​ class="btn btn-info"​​ ng-click="data.rowColor = button">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ {{button}}

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </button>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </span>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <table​​ class="table">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr><th>#</th><th>Action</th><th>Done</th></tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </thead>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- Define a behavior in the controller and invoke it from the event directive. -->

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <tr​​ ng-repeat="item in todoList"​​ ng-class="data.rowColor"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ ng-mouseenter="handleEvent($event)"

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ ng-mouseleave="handleEvent($event)">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <!-- mouseenter event will really be presented as mouseover and​​ 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ that the mouseleave event will be represented by mouseout. -->

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

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td>{{item.action}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <td​​ ng-class="data.columnColor">{{item.complete}}</td>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </tr>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </table>

 ​​ ​​ ​​​​ </div>

</body>

</html>

 

Example for managing Boolean attribute in the angularjs:

 

Tick the checkbox button will be disable and untick the checkbox ,will enable the button.

Below is the code for the given example:

<!DOCTYPE​​ html>

<html​​ ng-app="DotNetMindsApp">

<head>

 ​​ ​​ ​​​​ <title>Directives</title>

 ​​ ​​ ​​​​ <script​​ src="../Scripts/angular.js"></script>

 ​​ ​​ ​​​​ <script>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ angular.module("DotNetMindsApp", [])

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ .controller("AttributeCtrl",​​ function​​ ($scope) {

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ $scope.dataValue =​​ false;

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ });

 ​​ ​​ ​​​​ </script>

</head>

<body>

 ​​ ​​ ​​​​ <div​​ id="todoPanel"​​ class="panel"​​ ng-controller="AttributeCtrl">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <h3​​ class="panel-header">Shopping List</h3>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <div​​ class="checkbox well">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <input​​ type="checkbox"​​ ng-model="dataValue">

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ Set the Data Value

 ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </label>

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ </div>

 

 ​​ ​​ ​​ ​​ ​​ ​​ ​​​​ <button​​ class="btn btn-success"​​ ng-disabled="dataValue">My Button</button>

 ​​ ​​ ​​​​ </div>

</body>

</html>

 


Recommended Book for MVC : List of Some Important books for .NET Framework, C#, MVC, WCF



 

Table of Contents :

Elements and event directives in angular.js

 

Example of element VISIBILITY:

 

Example 1

Understanding Transclusion in AngularJS

 

Example 2

Example of Table stripped problem with ng-hide in angular.js :

 

Example 3

Example of managing classes and css in html using angular.js:

 

Example 4

Example of Event handling in angularjs :

 

Example 5

Example for managing Boolean attribute in the angularjs:

Example 6
(Visited 96 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *