Getting Unordered Lists to Cooperate with Angular.js' Filters and Orders

Question

Getting Unordered Lists to Cooperate with Angular.js' Filters and Orders

Is it possible to sort based on price and rating using ng-click in an li element instead of a select menu? I have been searching for a solution and this is the closest I have found.

<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

Answer 1

Answer №1

You didn't provide the structure of your data or controller, so I created a basic one that achieves the desired outcome. You can view the implementation on this fiddle.

Keep in mind that ng-click should trigger a function or execute code. To maintain separation of concerns, it's better to avoid mixing controller logic in the view. For instance, if the sorting criteria changes in the future, updating it in the view directly could lead to complications.

I included a sorting function that simply takes the property as input. Feel free to customize this according to your requirements.

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

You didn't provide the structure of your data or controller, so I created a basic one that achieves the desired outcome. You can view the implementation on this fiddle.

Keep in mind that ng-click should trigger a function or execute code. To maintain separation of concerns, it's better to avoid mixing controller logic in the view. For instance, if the sorting criteria changes in the future, updating it in the view directly could lead to complications.

I included a sorting function that simply takes the property as input. Feel free to customize this according to your requirements.

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 3

Answer №2

I have taken the liberty of transferring your code to a fiddle:

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

When using ng-click, it is important that it triggers an action, as opposed to what Tyrsius claimed, although it does not necessarily have to call a function. In my fiddle example, I am assigning a value to a scope property called order = 'price' or 'rating' based on the user's click.

Then you use orderBy:order, which will evaluate whatever is stored in $scope.order after the click event.

I trust this explanation clarifies any confusion.

Answer 4

I have taken the liberty of transferring your code to a fiddle:

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

When using ng-click, it is important that it triggers an action, as opposed to what Tyrsius claimed, although it does not necessarily have to call a function. In my fiddle example, I am assigning a value to a scope property called order = 'price' or 'rating' based on the user's click.

Then you use orderBy:order, which will evaluate whatever is stored in $scope.order after the click event.

I trust this explanation clarifies any confusion.

Getting Unordered Lists to Cooperate with Angular.js' Filters and Orders

Answer №1

Answer №2

Similar questions

I am encountering a horizontal scroll bar despite setting the width to 100%

Saving dynamic object expressions that are constantly re-evaluated within Angular

Strange error message: Attempting to set properties of null (changing 'innerHTML')

Obtain the templateUrl using the ui-router functionality

Receiving empty response after attempting a cross-domain POST query with Cross-Origin Resource Sharing

When an ajax request fails with error 500, the Jquery script will come to a halt

Retrieve the text and image simultaneously using jQuery

My Experience Dealing with an Issue on the Star Wars App

What is the best way to transfer variables between PHP and an external JavaScript file?

Is it universally compatible to incorporate custom attributes through jquery metadata plugin in all web browsers?

Numerous navigable tabs all on a single page

Transforming a function into an array in TypeScript

The AngularJS call is successfully working in POSTMAN, however, it is encountering difficulties when executed in the AngularJS Application. The issue seems to be related to the response to

There was a TypeError encountered while trying to read properties of undefined in Next.js version 13

Output a variable that is generated from invoking an asynchronous function

A warning is triggered when attempting to return a non-returning function from a Promise

Eliminating unnecessary gaps caused by CSS float properties

Merge the date and time values to create a unified datetime

After modifying the variable from 'let' to 'const' and replacing 'i++' with 'i+1' in

The issue of Meteor and React Router resulting in blank rendering