sorting list by select element item using angular js
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>
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.
如果不使用过滤器或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
}
}
上一篇: 根据AngularJs版本显示不工作
下一篇: 通过使用角度js选择元素项来排序列表