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 e 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 is my object.

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 e 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 is my object.

• javascript
• angularjs

2 Answers 2

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

​

I've copied and pasted your code out into a fiddle:

http://jsfiddle/blesh/tSHUf/

ng-click needs to do something, it doesn't have to 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.

Then you orderBy:order which will $eval whatever is in $scope.order, which was set by your click.

I hope that helps.