Angular.js：如何獲得orderBy或從無序列表中篩選工作？

Question

嘗試根據價格和評分進行排序（在返回的對象中）。我寧願做一個李，而不是使用選擇菜單。這有可能嗎？我一直在尋找周圍，這是我想出的最接近的。

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

Answer 1

你沒有給我們你的數據或你的控制器的結構，所以我只做了一個簡單的，做了你想要的。這裏是the fiddle。

注意：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}]; 
} 

Answer 2

我已經複製出和粘貼代碼到一個小提琴：

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

ng-click需要做東西，它不是有調用Tyrsius聲明的函數，但它應該執行一些代碼。正如你將在我的小提琴中看到的，我將根據你點擊的內容，在名爲order = 'price'或'rating'的範圍上設置一個屬性。

然後你orderBy:order它將$ eval無論$ scope.order，這是你的點擊設置。

我希望有幫助。