AngularJS Candle Search

For Kateys Kandles

by Rynne Cowham

HTML

<div ng-app="myApp">
    <div ng-controller="candleCtrl">
        <p>
            <input type="text" ng-model="search.$" />
        </p>
        <table>
            <tr ng-repeat="candle in candles.roster | filter: search">
                <td id="name">
                     <h3>{{ candle.name }}</h3>

                </td>
                <td id="description"><span class="description">{{ candle.description }}</span>
                </td>
                <td id="smallprice"><span>Small (2.5" tall, 2" diameter), {{ candle.price1 | currency }}</span>

                </td>
                <td id="largeprice"><span>Large (4" tall, 3" diameter), {{ candle.price2 | currency }}</span>

                </td>
                <td id="collection"><span>Part of the {{ candle.collection }}</span>
                </td>
            </tr>
        </table>
    </div>
</div>

CSS

table {
    border:2px solid magenta;
    border-collapse:collapse;
}
table tr td {
    display:table-cell;
    width:auto;
    padding:4px;
    border:1px solid magenta;
    text-align:left;
    vertical-align:top;
    font-family:'HelveticaNeue', 'Helvetica', sans-serif;
    font-size:0.925em;
    color:purple;
}
#description {
    width:35%;
}
#largeprice, #smallprice {
    width:20%;
}
td span {
    font-size:0.9em;
}
td .description {
    font-size:0.785em;
}
h3 {
    margin-top:0;
    color:green;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.factory('Candles', function () {
    var Candles = {};
    Candles.roster = [{
        name: 'Amber Sandalwood',
        description: 'A sweet and earthy blend both stimulating and grounding. Great for use in meditation; Sandalwood is said to open the third eye.',
        price1: '8.95',
        price2: '19.99',
        collection: 'Aromatherapy Collection'
    }, {
        name: 'Goddess',
        description: 'A delightful blend of Egyptian musk, bergamot and vanilla. This candle will help you feel uplifted and relaxed, and enhance your mood.',
        price1: '8.95',
        price2: '19.99',
        collection: 'Aromatherapy Collection'
    }, {
        name: 'Lavender',
        description: 'A great all-around candle, relaxing and delightful, also beneficial in healing cuts and burns rapidly.',
        price1: '8.95',
        price2: '19.99',
        collection: 'Aromatherapy Collection'
    }, {
        name: 'Love',
        description: 'Euphoric and relaxing blend of jasmine and bergamot. Can help calm mental stress and the nervous system in general. If you experience headaches, rub a drop of this candlewax into your temples for relief.',
        price1: '8.95',
        price2: '19.99',
        collection: 'Aromatherapy Collection'
    }, {
        name: 'Patchouli Pear',
        description: 'A delightful, uplifting Blend the two combined together create happiness and fond memories from the past.',
        price1: '8.95',
        price2: '19.99',
        collection: 'Aromatherapy Collection'
    }];
    return Candles;
});

function candleCtrl($scope, Candles) {
    $scope.candles = Candles;
}