sorting list by select element item using angular js

Question

here is my code i want to sort items in list by selecting from drop down but it displays even nothing please give me a answer how can i get value of items and then sort data var app = angular.module("app", []); app.controller(ShoppingCartCtrl,function($scope) {

        $scope.items = [
        {Name: "Soap", Price: "25", Quantity: "10"},
        {Name: "Shaving cream", Price: "50", Quantity: "15"},
        {Name: "Shampoo", Price: "100", Quantity: "5"}
              ];

        $scope.mySortFunction = function(item) {
        if(isNaN(item[$scope.sortExpression]))
        return item[$scope.sortExpression];
        return parseInt(item[$scope.sortExpression]);
        }
        });
    </script>
</head>
<body>
    <div ng-app="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>
                </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>
            </table>
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
                        <td>{{item.Name}}</td>
                        <td>{{item.Price | currency}}</td>
                        <td>{{item.Quantity}}</td>
                    </tr>
                </tbody>
            </table>
            <br />
        </div>
    </div>
</body>

jsfiddle.net/vkums8t5 i want now get data from url and then sorted by selecting an element can you help me Anik Islam — Numan Hassan
– Numan Hassan, Commented Jul 5, 2015 at 8:03

Matthew King · Accepted Answer · 2015-07-05 05:52:36Z

0

This works: http://jsfiddle.net/F9JDS/14/

app.controller('ShoppingCartCtrl', function ($scope) {
  ...
}

Make sure ShoppingCartCtrl is a string when you pass it to app.controller.

answered Jul 5, 2015 at 5:52

Matthew King

1,3627 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew King Over a year ago

That's weird because it's working in the jsfiddle. If you open the developer console, are there any errors? That will give some hints as to the difference between our environments.

ZHAO Xudong · Accepted Answer · 2015-07-05 12:41:16Z

0

if do not use filter or orderby, it can be done like:

//watch sortBy
$scope.$watch(function() {
    return $scope.sortExpression
}, function(newSort) {
    $scope.items.sort(sortBy(newSort))
})

//sortBy
function sortBy(sortExp) {
    return function(a, b) {
        return a[sortExp] > b[sortExp] ? 1 : -1
    }
}

edited Jul 5, 2015 at 12:41

answered Jul 5, 2015 at 5:46

ZHAO Xudong

1,4111 gold badge13 silver badges21 bronze badges

2 Comments

Numan Hassan Over a year ago

jsfiddle.net/vkums8t5 i want now get data from url and then sorted by selecting an element can you help me @ZHAO Xudong

Numan Hassan Over a year ago

if i sort i sort only one type like ascending or descending its working but i need both of them now i add 2 more options in drop down that looks like title ASC,Title DESC,Score ASC,Score DESC now kindly guide me how can i do this what changes i do to achieve that ?

Collectives™ on Stack Overflow

sorting list by select element item using angular js

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related