Sort the elements according to the input text in AngularJS

I'm attempting to dynamically order a list of items in AngularJS based on user input text. For example, if I type "author" into the input field, the list should be sorted by author.

Here is my code:

<input type = "text" ng-model = "sort">

<ul class = "list-unstyled">
 <li ng-repeat = "comment in dishCtrl.dish.comments | orderBy: sort">
            <blockquote class = "blockquote">
               <p>{{comment.rating}} Stars </p>
               <p>{{comment.comment}}</p>
            <footer>{{comment.author}}, {{comment.date | date}</footer>
            </blockquote>
 </li>

Unfortunately, this code is not functioning as expected. I have searched extensively but have been unable to find an example that addresses this issue.

javascriptangularjs

Answer №1

In order to make this work, you need to first declare the variable in the controller:

let sorting = '';

Next, you should specify the ng-model directive to link the input value with this variable:

<input type="text" ng-model="menuCtrl.sorting">

Finally, you can implement the filter like this:

<div class="well" ng-repeat="item in menuCtrl.items | orderBy: menuCtrl.sorting">

Answer №2

Your code has a minor error that needs fixing. The space after the orderBy expression should be removed.

<li ng-repeat = "comment in dishCtrl.dish.comments | orderBy:sort">

If the above solution doesn't work, consider using single quotes like this: 'sort'

Answer №3

For this input, make sure to attach an action, whether it's through a straightforward ng-enter directive or by using a submit button.

Answer №4

Since you are utilizing the controller as syntax in your ng-repeat, it is evident that you need to make a change: 

<input type = "text" ng-model = "sort">

Modify it to: 

<input type = "text" ng-model = "dishCtrl.sort">

Additionally, remember to update your ng-repeat:

<li ng-repeat = "comment in dishCtrl.dish.comments | orderBy: dishCtrl.sort">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for obtaining the values from these newly generated text fields?

Every time I click on the "ADD TEXTBOX" button, a new HTML textbox is dynamically created using jQuery's append method. However, I am struggling to figure out how to retrieve and store the values of these textboxes in PHP. $(w).append('<div&g ...

javascriptphpjquery

The script section within the Angular controller function was not executed, and as a result, the values were not properly

When I click on the navigation links in my application, I want to load an external HTML file. (See [index.html]) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="defaultApp"> <head> </head> <body ng-controller= ...

angularjs

How can you retrieve the currently selected dropdown item when another input is blurred using jQuery?

My goal is to automatically retrieve the current dial-code from the selected country when I click on input #phone, and then insert it into the input #dialCode. Here's a snippet of the HTML: <input id="phone" type="text"> < ...

javascriptjquery

Assigning text to textarea according to the content in the input field

Need help with input fields and textarea input(ng-model='form.firstName', name='firstName', id='familyName') and input(ng-model='form.lastName', name='lastName') I also have a textarea field textarea(i ...

node.jsangularjs

Adding various values from an interactive form

My database has two rows titled start_time and end_time. I am trying to insert values from a dynamic form using implode() but facing difficulty in inserting values from the subsequent input fields. https://i.sstatic.net/khTu6.png Database https://i.ssta ...

javascriptphpmysqlarraysimplode

When I move to a different page, Javascript ceases to function

Currently, I am in the process of creating a user interface with the use of html, css, and javascript. One of the features in my project is an "Exit" menu item that triggers window.close(); when clicked to close the user interface. Strangely, this functio ...

javascripthtmlcss

"Encountering an issue with Next.js where the Redux

Hey there, I'm working on a simple project using Nextjs. I need to access the state of my Redux store but I'm encountering an error when trying to use store.getState, it's throwing an error saying getState is undefined. Additionally, I have ...

javascriptreduxreact-reduxnext.js

What is the best way to specify the data type as double for the onChange Event

I am currently utilizing React's onChange event in an input tag and have encountered an issue with type definitions. Take a look at this code: onChange?: (e: ChangeEvent<HTMLInputElement> | SeperationChangeEvent) => void; This is how I&ap ...

javascriptreactjstypescript

Is it possible to loop through and update every spreadsheet within the directory using this code?

I'm having trouble figuring out how to loop the code provided through all spreadsheets in a specific folder. Every attempt I've made at iterating through the folder has resulted in errors, even after trying various methods. I plan to use a stand ...

javascriptgoogle-apps-script

Spinning a point around the center on a canvas

My friend and I are in the process of creating a game, and we've reached the point where we want to implement a radar system. While we have successfully designed a basic radar that displays everything in the correct positions, our next challenge is to ...

javascripthtmlcanvasrotation

Unable to get jQuery click and hide functions to function properly

Hello, I am currently working on a program where clicking a specific div should hide its own class and display another one. However, the code does not seem to be functioning correctly. Below is my current implementation: $("#one").click(function(){ v ...

javascriptjquery

What is the best way to show real-time values using chart js?

Just recently, I've delved into the world of web development and am eager to learn how to integrate chart js for real-time value display. Could anyone offer advice or guide me through the process? var data = []; var temp = []; async f ...

javascripthtmlnode.jsejs

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

Why is my AngularJS li scope not being removed?

Can someone please assist me? I am new to AngularJS and need help with a function I created. I have created a function that adds a next tab section and removes the current section. Similarly, I have another function that adds a previous tab section and re ...

javascriptangularjsangularjs-scope

Establishing Routing for Angular within an ASP.NET Web API 2 application

Currently, I am facing difficulties in setting up the routing for my project. There are several cases that need to be handled, but I am struggling to make them work as intended. case 1: / - Should route to the index of the angular app Case 2: /{angular ...

javascriptc#asp.netangularjsasp.net-web-api

What is the best way to determine when all asynchronous tasks and callbacks have been completed so that we can proceed securely?

Here is a code snippet that reads a file containing documents sorted by categories and values in descending order. It then modifies the documents with the highest value for each category. Below is the code: var MongoClient = require('mongodb'). ...

javascriptnode.jsmongodbasynchronouscallback

Cease and Begin Page Overflow / Scroll with a Single Click Feature

Background: I recently followed a tutorial on how to create a lightbox using HTML, CSS, and JavaScript. However, I encountered an issue where I wanted to disable the scrollbar functionality when the lightbox is displayed, preventing users from scrolling ...

javascripthtmlcsstwitter-bootstrap

One way to dynamically hide certain fields based on the value of another field is by utilizing AngularJS, Razor, and C# in

Need assistance with AngularJS and Razor. I am a beginner in these technologies and need some help with the following code snippet: <div ng-app=""> <p>Input page number to filter: <input type="text" ng-model="pageNumber"></p> ...

javascriptc#jqueryangularjsrazor

Creating Class Names Dynamically in Angular 2 Using ngFor Index

Encountering an issue while trying to generate a dynamic class name based on the ngFor loop index in Angular 2. Due to restrictions, I had to use a specific syntax as Angular 2 does not support ngFor and ngIf together on the same element. Given this setup ...

javascripttypescriptangular

Is there a method to verify if a GeoJSON feature is in the shape of a rectangle and locate its corner coordinates?

I am looking for a way to identify all the corner coordinates of GeoJSON features that are in rectangular or square shape. Some of the features have more than five coordinates but still represent a rectangle or square shape. Is there an algorithm or third- ...

javascriptjsonnode.jsgisgeojson