angularJS-tutorial/lab20.html at master · eramitmishra/angularJS-tutorial · 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script>
        var mainApp = angular.module("mainWatch", [])
            .controller("cntrlMain", ['$scope', 'orderByFilter',
            function ($scope, orderBy) {
                $scope.title = "Order By or SortBy";
                $scope.Header = "AngularJS orderBy and ternary opreation";
                $scope.products = [
                                    {
                                        "name": "p1", "price": "15", "quantity": "60", "InStock": 90
                                    },
                                    {
                                        "name": "p2", "price": "25", "quantity": "41", "InStock": 100
                                    }
                                    ,
                                    {
                                        "name": "p3", "price": "20.10", "quantity": "14", "InStock": 100
                                    }
                                    ,
                                    {
                                        "name": "p4", "price": "25.52", "quantity": "41", "InStock": 120
                                    }
                ];
                $scope.StockLimit = 30;
                $scope.propertyName = 'name';
                $scope.reverse = false;
                $scope.products = orderBy($scope.products, $scope.propertyName, $scope.reverse);
                $scope.sortBy = function (propertyName) {
                    $scope.reverse = (propertyName !== null && $scope.propertyName === propertyName) ? !$scope.reverse : false;
                    $scope.propertyName = propertyName;
                    $scope.products = orderBy($scope.products, $scope.propertyName, $scope.reverse);
                };
            }
            ]);
        angular.element(document).ready(function () {
            angular.bootstrap(document, ["mainWatch"]);


        });

    </script>
    <style>
        .sortorder:after {
            content: '\25b2';
        }

        .sortorder.reverse:after {
            content: '\25bc';
        }
    </style>
</head>
<body ng-controller="cntrlMain" class="container">
    <div class="jumbotron"><h1>{{Header}}</h1>   </div>
    <div class="alert alert-success">
<pre>
        <b>Usage In HTML Template Binding <code>{{ orderBy_expression | orderBy : expression : reverse : comparator}}</code></b>
        <b>In JavaScript <code>$filter('orderBy')(collection, expression, reverse, comparator)</code></b>
</pre>


    </div>

    <div >

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('name')">Product Name</a></th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('price')">Price Per Unit</a></th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('quantity')">Order Quantity</a></th>
                    <th class="text-primary label-warning">Order Price</th>
                    <th class="text-primary label-warning"><a href="javascript:void(0);" ng-click="sortBy('InStock')">Current Stock</a><span class="sortorder" ng-class="{reverse: reverse}"></span></th>
                    <th class="text-primary label-warning">After Order Stock</th>
                </tr>
            </thead>
            <tr ng-repeat="p in products" class="text-danger">
                <td>{{p.name}}</td>
                <td>{{p.price | currency:"$" }}</td>
                <td>{{p.quantity}}</td>
                <td>{{p.quantity * p.price | currency}}</td>
                <td>{{p.InStock}}</td>
                <td style="{{p.InStock - p.quantity > StockLimit ? '':'background-color:Red;color:white;'}}">{{p.InStock - p.quantity | number}}</td>
            </tr>
        </table>


    </div>
</body>
</html>