javascript Angular.js：如何从无序列表中获取 orderBy 或过滤器来工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13711960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js: How to get orderBy or filter from an unordered list to work?
提问by Christopher Marshall
Trying to sort based on price and rating (in the Object returned). I'd rather do an ng-click an an li than use a select menu. Is there a way this is possible? I've been looking all around and this is the closest I've come up with.
尝试根据价格和评级（在返回的对象中）进行排序。我宁愿做一个 ng-click an li 而不是使用选择菜单。有没有办法做到这一点？我环顾四周，这是我想出的最接近的。
<ul class="restaurant-filter">
<li> <i class="icon-search"></i>Organize results by "Price" & "Rating"…
<ul ng-model="priceAndRating">
<li ng-click="price">Price</li>
<li ng-click="rating">Rating</li>
</ul>
</li>
</ul>
<ul class="available-restaurants">
<li ng-repeat="restaurant in availableRestaurants | orderBy:priceAndRating" ng-click="addRestaurantToEvent(restaurant.restaurantName)">
<h6>{{restaurant.restaurantName}}</h6>
<p>label one two three for five six</p>
<i class="icon-chevron-right"></i>
</li>
</ul>
availableRestaurants is my object.
availableRestaurants 是我的对象。
回答by Kyeotic
You didn't give us the structure of your data, or your controller, so I just made a simple one that did what you wanted. Here is the fiddle.
你没有给我们你的数据结构，或者你的控制器，所以我只是做了一个简单的来做你想要的。这是小提琴。
Note: ng-clickneeds to call a function, or execute some code. You could write a function literal to set the property, but this is mixing controller logic into the view (think about what would happen if the sort needed to change later, you would need to update that logic in the view, which is bad).
注意：ng-click需要调用一个函数，或者执行一些代码。您可以编写一个函数文字来设置属性，但这是将控制器逻辑混合到视图中（想想如果稍后需要更改排序会发生什么，您需要在视图中更新该逻辑，这很糟糕）。
I added a sort function to handle this, that just takes the property. You can set this up however you need to.
我添加了一个排序函数来处理这个问题，它只需要属性。您可以根据需要进行设置。
HTML:
HTML：
<div ng-app="miniapp">
<div ng-controller="Ctrl1">
<ul class="restaurant-filter">
<li> <i class="icon-search"></i>Organize results by "Price" & "Rating"…
<ul>
<li ng-repeat="option in sortOptions" ng-click="setSort (option)">{{option}}</li>
</ul>
</li>
</ul>
<ul class="available-restaurants">
<li ng-repeat="r in availableRestaurants | orderBy:sort">
<span>{{r.name}} - {{r.rating}}</span>
</li>
</ul>
</div>
</div>?
JS:
JS：
function Ctrl1($scope) {
$scope.sortOptions = ["Price", "Rating"];
$scope.sort = "Price";
$scope.setSort = function(type) { $scope.sort = type.toLowerCase(); };
$scope.availableRestaurants = [{name: "Chevy's", rating: 6, price: 6},
{name: "Burger King", rating: 2, price: 1},
{name: "Red Robin", rating: 4, price: 4},
{name: "Carl's Jr", rating: 5, price: 2}];
}
?
?
回答by Ben Lesh
I've copied and pasted your code out into a fiddle:
我已将您的代码复制并粘贴到小提琴中：
http://jsfiddle.net/blesh/tSHUf/
http://jsfiddle.net/blesh/tSHUf/
ng-click needs to do something, it doesn't haveto call a function as Tyrsius asserted, but it should execute some code. As you'll see in my fiddle I'm setting a property on the scope named order = 'price'or 'rating'depending on what you click.
NG-点击需要做的事情，它不具有调用一个函数作为Tyrsius断言，但它应该执行一些代码。正如您将在我的小提琴中看到的，我在命名的范围上设置一个属性，order = 'price'或者'rating'取决于您单击的内容。
Then you orderBy:orderwhich will $eval whatever is in $scope.order, which was set by your click.
然后你orderBy:order将 $eval 任何在 $scope.order 中的东西，这是通过你的点击设置的。
I hope that helps.
我希望这有帮助。
