2

尝试根据价格和评级（在返回的对象中）进行排序。我宁愿做一个 ng-click an li 而不是使用选择菜单。有没有办法做到这一点？我一直在环顾四周，这是我想出的最接近的。

    <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 是我的对象。

4

2 回答 2

11

你没有给我们你的数据结构，或者你的控制器，所以我只是做了一个简单的，可以满足你的需求。这是小提琴。

注意：ng-click需要调用一个函数，或者执行一些代码。您可以编写一个函数文字来设置属性，但这会将控制器逻辑混合到视图中（想想如果稍后需要更改排序会发生什么，您需要在视图中更新该逻辑，这很糟糕）。

我添加了一个排序函数来处理这个问题，它只需要属性。您可以根据需要进行设置。

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}];
}

​</p>

于 2012-12-04T21:34:11.267 回答
2

我已将您的代码复制并粘贴到小提琴中：

http://jsfiddle.net/blesh/tSHUf/

ng-click 需要做一些事情，它不必像 Tyrsius 断言的那样调用函数，但它应该执行一些代码。正如您将在我的小提琴中看到的那样，我在命名的范围上设置了一个属性，order = 'price'或者'rating'取决于您单击的内容。

然后，您orderBy:order将对 $scope.order 中的任何内容进行 $eval，这是通过单击设置的。

我希望这会有所帮助。

于 2012-12-04T21:42:16.617 回答