Monday, June 27, 2016

In-Built Directives of Angular

1.3 In-Built Directives

This post is all about the inbuilt Directives of AngularJS

1) ng-controller
 
    Suppose you have a code like this
HTML :
 
    <body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<div>
</body>
app.js

var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
}

2) ng-show

So now I want to add a button into html if javascript array has canBuy=true so how can i do          that ? Let's do that.
 
   HTML :

<body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js
 
var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
}

If the value of canBuy is true then and only then BUY button is display into html.if the value     of the canBuy is false or that property canBuy not exists into that arrat shop_product then BUY           button will not display into HTML.

3) ng-hide

So now i want check that if that product is sold out from store then i dont want to display into           HTML So how can i do that ? Let's do that

HTML :

<body ng-controller="ShopConroller as shop">
<div ng-hide="shop.product.canSold">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js
 
var shop_product={
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
canSold="true"
}

4) ng-repeat

Assume that you have so many products and you want to check that how many products are           sold out or available.at that time you need to use ng-repeat Directory

 HTML :

<body ng-controller="ShopConroller as shop">
<div ng-repeat="product in shop.products">
<h1>{{product.name}}</h1>
<h1>{{product.price}}</h1>
<p>{{product.description}}</p>
<button ng-show="shop.product.canBuy">BUY</button>
<div>
</body>

app.js

var app=angular.module('GrocessaryShop',[])
app.controller('ShopConroller',function(){
this.products=shop_products;
});
 
var shop_products=[
{
name: "FaceWash",
price: "100",
description: "FaceWash",
canBuy: true,
},
{
name: "Shampoo",
price: "10",
description: "Shampoo",
canBuy: true,
}
];

Exercise :

1) Use a directive to ensure that we can only see the "BUY" button if the canBuy property is true.

2) Our first shop_product is so popular that we've run out of stock already! Luckily We have canBuy property to our shop_product. When a shop_product is canBuy, hide the .product element.

3) In the app.js file we changed things up a little with a new shop_products array. Assign shop_products to a products property inside StoreController.

4) You know how to display all the products, don't you? Use the correct directive to display all the products in all divs.

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to  visionfortech.blogspot.com.

Related Posts :


1)  Where we can use AngularJS and Difference Between angularjs and Jquery
2)  (Level 1.1) Directives,Modules into AngularJS
3)  (Level 1.2) Controller Into AngularJS
4)  (Level 1.3) In built Directives of AngularJS
5)  (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6)  (Level 2.2) Tabs into Angular  

No comments:

Post a Comment

Protected by Copyscape