Angular.js：如何获得排序依据，或从一个无序列表过滤工作？ [英] Angular.js: How to get orderBy or filter from an unordered list to work?

问题描述

试图根据价格和等级进行排序（在对象返回）。不是使用选择菜单我宁愿做一个NG-单击一个礼。有没有一种办法，这是可能的吗？我一直在寻找各地，这是我想出最接近的一次。

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.

    <ul class="restaurant-filter">
        <li> <i class="icon-search"></i>Organize results by "Price" &amp; "Rating"&hellip;
            <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是我的目标。

availableRestaurants is my object.

推荐答案

您没有给我们你的数据，或者你的控制器的结构，所以我只是做了一个简单的一个做你想要的。这里是小提琴。

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.

请注意： NG-点击需要调用一个函数，或执行一些code。你可以写文字来设置属性的函数，但是这是控制器逻辑混入视图（想想如果需要排序以后更改会发生什么，你需要以更新的认为逻辑，这是坏的）。

Note: ng-click needs 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).

我添加了一个排序函数来处理这个问题，只是需要的属性。但是，您可以设置此需要。

I added a sort function to handle this, that just takes the property. You can set this up however you need to.

HTML

<div ng-app="miniapp">
    <div ng-controller="Ctrl1">
        <ul class="restaurant-filter">
        <li> <i class="icon-search"></i>Organize results by "Price" &amp; "Rating"&hellip;
            <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}];
}

这篇关于Angular.js：如何获得排序依据，或从一个无序列表过滤工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！