ng-codeSchool6

2-1 filters: Image handling http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/1/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">
        <p>Repeater starts</p>
        <div ng-repeat="product in store.products">
            <h1> {{product.name}} </h1>
            <h2> {{product.price | currency}}</h2>
            <img ng-show="product.images.length" ng-src="{{product.images[0].full}}" width="25%" height="25%"/>
            <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,
        description: 'Sparkly',
            images: [
                {
                    full: 'https://www.google.com/images/srpr/logo11w.png',
                    thumb:'https://www.google.com/images/srpr/logo11w.png'
                }],
        canPurchase: true,
        soldOut: false
    },
    {
        name: 'Pentagonal',
        price: 5.95,
        description: 'deep',
                    images: [],
        canPurchase: true,
        soldOut: false
    } 
    ];
})();