ng-codeSchool3

first codeSchool Lesson conditional display - switch soldOut from true to false to display the prroduct.

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>hiding entire product with soldOut</header>
    
    <body ng-controller="StoreController as store">
        <div ng-hide="store.product.soldOut">
            <h1> {{store.product.name}} </h1>
            <h2> {{store.product.price}}</h2>
            <p>{{store.product.description}}</p>
            <button ng-show="store.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.product = gem;
    });

    var gem = {
        name: 'dodecahedron',
        price: 2.95,
        description: 'Sparkly',
        canPurchase: false,
        soldOut: true
    }

})();