使用角度js通过选择元素项对列表进行排序答案

【问题标题】：sorting list by select element item using angular js使用角度js通过选择元素项对列表进行排序
【发布时间】：2015-09-22 12:18:36
【问题描述】：

这是我的代码，我想通过从下拉列表中选择来对列表中的项目进行排序，但它甚至什么都没有显示请给我一个答案我怎样才能获得项目的价值然后对数据进行排序 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>

【问题讨论】：

你能在 plunkr 中提供你的代码吗？？
jsfiddle.net/vkums8t5 我现在想从 url 获取数据，然后通过选择一个元素进行排序，你能帮我 Anik Islam

标签： angularjs

【解决方案1】：

如果不使用 filter 或 orderby，可以这样做：

//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
    }
}

【讨论】：

jsfiddle.net/vkums8t5我现在想从url中获取数据，然后通过选择一个元素来排序你能帮我吗@赵旭东
如果我排序，我只对一种类型进行排序，比如升序或降序，但我现在需要这两种类型，我在下拉列表中添加了另外 2 个选项，看起来像标题 ASC、标题 DESC、分数 ASC、分数DESC 现在请指导我如何做到这一点，我做了哪些改变来实现这一目标？

【解决方案2】：

这可行：http://jsfiddle.net/F9JDS/14/

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

确保将 ShoppingCartCtrl 传递给 app.controller 时它是一个字符串。

【讨论】：

这很奇怪，因为它在 jsfiddle 中工作。如果打开开发者控制台，有没有报错？这将为我们的环境之间的差异提供一些提示。