Topic (Angular) 4 - Array in Angular

Manual Array

Create an array is the basic thing in programming language. This happens when we are dealing we set of property. In angular Js we can define manually using expressions. The property inside StoreController which is product  can be iterate using array index.

<div ng-controller="StoreController as store" style="padding:20px;">
            <h1> {{store.product[0].name}}</h1>
            <h2> ${{store.product[0].price}}</h2>
            <p>{{store.product[0].description}}</p>

            <button ng-show="store.product[0].canPurchase">Add to Cart </button>

            <h1> {{store.product[1].name}}</h1>
            <h2> ${{store.product[1].price}}</h2>
            <p>{{store.product[1].description}}</p>

            <button ng-show="store.product[1].canPurchase">Add to Cart </button>

        </div>

Ng-repeat

There is a simple way when we are going to working around with array in angular. Luckily angular js provide an alternative way where developers can iterate property using ng-repeat directive.

  <div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price}}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

This will produce a result like below :