Filtering and Sorting using Angular JS

by octavioamu

HTML

<script src="&lt;link href=&quot;//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div ng-app> <span class="bold">Demonstrating filtering and sorting using Angular JS</span>

    <br />
    <br />
    <div ng-controller="ShoppingCartCtrl">
        <div>Sort by:
            <select ng-model="sortExpression">
                <option value="Name">Name</option>
                <option value="Price">Price</option>
                <option value="Quantity">Quantity</option>
                <option value="Importance">Importance</option>
            </select>
        </div>
        <br />
        <div><strong>Filter Results</strong>

        </div>
        <table>
            <tr>
                <td>By Any:</td>
                <td>
                    <input type="text" ng-model="search.$" />
                </td>
            </tr>
            <tr>
                <td>By Name:</td>
                <td>
                    <input type="text" ng-model="search.Name" />
                </td>
            </tr>
            <tr>
                <td>By Price:</td>
                <td>
                    <input type="text" ng-model="search.Price" />
                </td>
            </tr>
            <tr>
                <td>By Quantity:</td>
                <td>
                    <input type="text" ng-model="search.Quantity" />
                </td>
            </tr>
            <tr>
                <td>By Importance:</td>
                <td>
                    <input type="text" ng-model="search.Importance" />
                </td>
            </tr>
        </table>
        <br />
        <table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Importance</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in...

CSS

.bold {
    font-weight:bold;
}
table td {
    padding: 10px;
}
table th {
    font-weight: bold;
    text-align: center;
}

JavaScript

function ShoppingCartCtrl($scope) {

    $scope.items = [{
        Name: "Soap",
        Price: "25",
        Quantity: "10",
        Importance: "Important"
    }, {
        Name: "Shaving cream",
        Price: "50",
        Quantity: "15",
        Importance: "Not so important"
    }, {
        Name: "Shampoo",
        Price: "100",
        Quantity: "5",
        Importance: "Don't care"
    }];

    // Code Trying to create the importance order
    
    $scope.mySortFunction = function (items) {
        //console.log($scope.items)
        //console.log($scope.sortExpression)

        if ($scope.sortExpression === "Importance") {
            console.log('te')
            for (var i = 0; i < $scope.items; i++) {

                filtered.push(item);
            }
            console.log(item[$scope.sortExpression])
            console.log(filtered)

            if (item[$scope.sortExpression] === "Don't care") {}
        } else {
            //$filter('orderBy')(items, $scope.sortExpression)
        }

    }
}