• With the third step, we finished the installation process and initialization of ngCart. Let’s move on to the next steps. Edit the home.html file, remove the column layout with products, and place a new div with ShopCartCtrl. This is shown in the following code:
    <div ng-controller="ShopCartCtrl">
      <div class="row text-center">
        <div class="col-xs-6 col-sm-3">
          <img src="https://placehold.it/262x150" alt="image" />
          <h4>My Item #1</h4>
          <p> $10.99</p>
          <ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>
        </div>
        <div class="col-xs-6 col-sm-3">
          <img src="https://placehold.it/262x150" alt="image" />
          <h4>My Item #2</h4>
          <p> $15.29</p>
          <ngcart-addtocart id="item2" name="My Item #2" price="15.29" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>
        </div>
          <div class="col-xs-6 col-sm-3">
          <img src="https://placehold.it/262x150" alt="image" />
          <h4>My Item #3</h4>
          <p> $25.75</p>
          <ngcart-addtocart id="item3" name="My Item #3" price="25.75" quantity="3" quantity-max="10">Add to Cart</ngcart-addtocart>
        </div>
        <div class="col-xs-6 col-sm-3">
          <img src="https://placehold.it/262x150" alt="image" />
          <h4>My Item #4</h4>
          <p> $29.25</p>
          <ngcart-addtocart id="item4" name="My Item #4" price="29.25" quantity="1" quantity-max="10">Add to Cart</ngcart-addtocart>
        </div>
      </div>
    </div>
  • Note that we replace the div from the previous example with the ngcart-addtocart directive on the highlighted code. Add the addtocart template at the end of home.html file:
    <script type="text/ng-template" id="template/ngCart/addtocart.html">
    <div ng-hide="attrs.id">
      <a class="btn btn-lg btn-primary" ng-disabled="true" ng-transclude></a>
    </div>
    <div ng-show="attrs.id">
      <div>
        <span ng-show="quantityMax">
          <select name="quantity" id="quantity" ng-model="q" ng-options=" v for v in qtyOpt"></select>
        </span>
          <a class="btn btn-sm btn-primary" ng-click="ngCart.addItem(id, name, price, q, data)" ng-transclude></a>
      </div>
      <span ng-show="inCart()">
      <br>
      <p class="alert alert-info">This item is in your cart. <a ng-click="ngCart.removeItemById(id)" style="cursor: pointer;">Remove</a></p>
      </span>
    </div>
    </script>