Ng-Show Directives
In Angular, we are given with options to show attributes or elements that we want to be displayed on our pages. Lets say we have a button "Add to Cart" we want to display. In <button> tag we can include our ngShow directive .
<div ng-controller="StoreController as store" style="padding:20px;"> <h1> {{productss.name}}</h1> <h2> ${{productss.price}}</h2> <p>{{productss.description}}</p> <button ng-show="productss.canPurchase">Add to Cart </button> </div>
This will produce a result :
Ng-Hide Directives
Likewise, we also can hide elements that we dont want to be displayed in our screen. Ng-hide are purposely to control elements or section that we want to be displayed. Lets say in our body class we have a controller directive called StoreController alias store. The ng-hide directive inside <div> tag is to control either the instance of property either have a soldOut element which if is true then the product will be hide from being displayed.
<body class="container" ng-controller="StoreController as store"> <div ng-hide="store.product.soldOut" class="product row"> <h3> {{store.product.name}} <em class="pull-right">${{store.product.price}}</em> </h3> <button ng-show="store.product.canPurchase">Add to Cart</button> </div> </body>
No comments:
Post a Comment