Angular JS Basics: Use of various directives

Today, i will share one application by using few ng directives.

On clicking the "delete" link, the corresponding items will be deleted rather erased from the screen.

sh.html:-
<!doctype html>
<html ng-app="show">
<head>
<meta charset="UTF-8">
<title>Use Of NG Directives</title>
<script src="angular.min.js"></script>
</head>

<body>

<div>
<div ng-controller="FruitCtrl">
<table>
<tr ng-repeat="fruit in fruits" ng-mouseenter="hover(fruit)" ng-mouseleave="hover(fruit)" ng-show="fruit.show">
<td>{{ fruit.id}}  </td>
<td>{{ fruit.name}}  </td>
<td>{{ fruit.price | currency }}   </td>
<td>{{ fruit.count }}   </td>
<td><a href="" ng-show="fruit.showDelete" ng-click="delete(fruit)">Delete</a></td>
</tr>
</table>
</div>
</div>
<script src="sh.js"></script>
</body>
</html>

sh.js:-
var show = angular.module('show', [ ]);
show.controller("FruitCtrl", function ($scope)
{

$scope.fruits = [{
"id": 1,
"name": "Apple",
"price": .50,
"count": 213,
"showDelete": false,
"show": true
}, {
"id": 2,
"name": "Orange",
"price": .45,
"count": 665,
"showDelete": false,
"show": true
}, {
"id": 3,
"name": "Banana",
"price": .60,
"count": 146,
"showDelete": false,
"show": true
}, {
"id": 4,
"name": "Kiwi",
"price": .80,
"count": 199,
"showDelete": false,
"show": true
}];

$scope.hover = function(fruit) {
// Shows/hides the delete button on hover
return fruit.showDelete = ! fruit.showDelete;
};

$scope.delete = function(fruit) {
// Hides a row of fruit, if the delete button was clicked
alert("Deleting the " + fruit.name);
return fruit.show = ! fruit.show;
};

});

Screenshots:-

Explanation:-

In the above example, various directives like "ng-show", "ng-repeat", "ng-click", "ng-mouseenter","ng-mouseleave" has been used.

Angular JS Basics

Saturday, 6 June 2015

Use of various directives

1 comment: