ng-codeSchool4

first codeSchool Lesson http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/3/video/1

by David McClelland

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html ng-app="store">
    <header>array access vs. repeater</header>
    
    <body ng-controller="StoreController as store">
        <div>
            <h1> {{store.products[0].name}} </h1>
            <h2> ${{store.products[0].price}}</h2>
            <p>{{store.products[0].description}}</p>
            <button ng-show="store.products[0].canPurchase">Add to Cart</button>
        </div>
        <hr/>
        <p>Repeater starts</p>
        <div ng-repeat="product in store.products">
            <h1> {{product.name}} </h1>
            <h2> ${{product.price}}</h2>
            <p>{{product.description}}</p>
            <button ng-show="product.canPurchase">Add to Cart</button>
        </div>
        <!--script type="text/javascript" src="angular.min.js"></script-->
        <!--script type="text/javascript" src="app.js"></script-->
    </body>

</html>

JavaScript

(function () {
    var app = angular.module('store', []);

    app.controller('StoreController', function () {
        this.products = gems;
    });

    var gems = [
        {
        name: 'dodecahedron',
        price: 2.95,
        description: 'Sparkly',
        canPurchase: true,
        soldOut: false
    },
    {
        name: 'Pentagonal',
        price: 5.95,
        description: 'deep',
        canPurchase: true,
        soldOut: false
    } 
    ];
})();