尝试根据价格和评级(在返回的对象中)进行排序。我宁愿按 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 是我的对象。
最佳答案
您没有向我们提供您的数据结构或您的 Controller ,因此我只是制作了一个简单的 Controller 来满足您的要求。这是 the fiddle .
注意:ng-click
需要调用一个函数,或者执行一些代码。您可以编写一个函数文字来设置属性,但这是将 Controller 逻辑混合到 View 中(想想如果稍后需要更改排序会发生什么,您需要在 View ,这很糟糕)。
我添加了一个排序函数来处理这个问题,它只接受属性。您可以根据需要进行设置。
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:
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}];
}
关于javascript - Angular .js : How to get orderBy or filter from an unordered list to work?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13711960/