1.3 In-Built Directives
This post is all about the inbuilt Directives of AngularJS
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 :
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
Comments
Post a Comment