pro-angularjs/Chapter 16/Listing 02.html at master · hestias1/pro-angularjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html ng-app="exampleApp">
<head>
    <title>Directives</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
            .directive("unorderedList", function () {
                return {
                    link: function (scope, element, attrs) {
                        var data = scope[attrs["unorderedList"] || attrs["listSource"]];
                        var propertyExpression = attrs["listProperty"] || "price | currency";
                        if (angular.isArray(data)) {
                            var listElem = angular.element("<ul>");
                            if (element[0].nodeName == "#comment") {
                                element.parent().append(listElem);
                            } else {
                                element.append(listElem);
                            }
                            for (var i = 0; i < data.length; i++) {
                                var itemElement = angular.element("<li>")
                                    .text(scope.$eval(propertyExpression, data[i]));
                                listElem.append(itemElement);
                            }
                        }
                    },
                    restrict: "EACM"
                }

            }).controller("defaultCtrl", function ($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 }
                ];
            })
    </script>

</head>
<body ng-controller="defaultCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>Products</h3>
        </div>
        <div class="panel-body">
            <div unordered-list="products" list-property="price | currency"></div>
        </div>
    </div>
</body>
</html>