Filter through Directive

Users can filter their cart with respect to the input price

by M. Junaid Salaat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="directive" ng-controller="Controller">
    <table class="table table-hover text-left">
        <thead>
            <tr>
                <th>Index</th>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in demoCart track by $index">
                <td>Item {{$index+1}}</td>
                <td>{{item.dish_n}}</td>
                <td>{{item.dish_quantity}}</td>
                <td>{{item.price}}</td>
            </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col col-md-12">
            <label for="filterNo">Filter Item wrt Price (Items less than):</label>
            <input type="number" id="filterNo" class="form-control" ng-model="filterNo" />
            <div filtered-total></div>
        </div>
    </div>
</div>

CSS

/* In the Input box below filter the items which are less than your input price */

JavaScript

angular.module('directive', [])
    .directive('filteredTotal', function () {
    return {
        restrict: 'A',
        template: '<div ng-repeat="obj in filteredObj track by $index" class=""><b>{{obj.dish_n}}:</b> Rs {{obj.price}}</div>',
        link: function postLink(scope, element, attrs) {
            scope.$watch("filterNo", function (newValue, oldValue) {
                scope.filteredObj = [];
                scope.demoCart.forEach(function (obj) {
                    if (obj.price < newValue) {
                        scope.filteredObj.push(obj);
                    }
                });
            });

        }
    };
})
    .controller('Controller', controller)

function controller($scope) {
    $scope.demoCart = [{
        "dish_n": "ROWTISSERES chicken",
        "dish_quantity": "Quarter chicken",
        "price": 425
    }, {
        "dish_n": "Garlic Potato Slices",
        "dish_quantity": "Delicious golden garlic wedges served with Ranch sauce",
        "price": 235
    }, {
        "dish_n": "Spicy Chicken Wings",
        "dish_quantity": "Chilli & Garlic infused Chicken wings served with Crispy vegetable sticks and a duo of dipping sauces.",
        "price": 370
    }, {
        "dish_n": "Whole Wheat Pancakes",
        "dish_quantity": "Prepared with organic wholewheat flour, and served with your choice of N‘eco’s toppings",
        "price": 319
    }];

}