Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

by Bryan Dellinger

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<div ng-app='demo'>
    <div ng-controller='MyCtrl'>
        <div class="panel panel-default">
            <div clas="panel-heading">
                <h3>Products</h3>
            </div>
            <div class="panel-body">
                <div unordered-list="products" list-property="name"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

var demo = angular.module('demo', []);

demo.directive('unorderedList', function() {
    return function (scope, element, attrs){
                         var data = scope[attrs["unorderedList"]];
                         var propertyName = attrs["listProperty"];
                         if (angular.isArray(data)){
                               var listElem = angular.element("<ul>");
                                element.append(listElem);
                            for (var i = 0; i < data.length; i++){
                                  listElem.append(angular.element('<li>').text(data[i][propertyName]));
                                }
                            }
                     }
          });

function MyCtrl ($scope) {
    $scope.products = [
        {name: "Apples", category: "Fruit", price: 1.20, expiry: 10},
        {name: "Bananas", category: "Fruit", price: 2.42, expiry: 7},
        {name: "Pears", category: "Fruit", price: 2.02, expiry: 6},
    ]; 
        $scope.test = "hello"
};