Utilize a singular ng-model for efficiently filtering and presenting filtered data

Recently, I encountered an issue with a HTML select element that is used to sort a list. The code for the select element looks like this:

<select ng-init="sortMethod=sortMethods[0]" ng-model="sortMethod">
  <option ng-repeat="sortMethod in sortMethods">{{sortMethod}}</option>
</select>

The available sort methods are defined as follows:

$scope.sortMethods = ['created', 'likes.count'];

I am utilizing the sortMethod variable to order a collection of objects:

<li ng-repeat="story in feedData|orderBy:sortMethod">
  Panel Count: {{story.frameURIs.length}}
</li>

Everything seems to be working correctly, however, the problem lies in the aesthetics of the select box options. Currently, it displays "created" and 'likes.count", but I would prefer it to show something more user-friendly like "Most Recent" and "Most Popular".

I attempted to modify sortMethod by using an array of objects:

$scope.sortMethods = [{'displayVal': 'Most Recent', 'sortVal': 'created'}, {'displayVal': 'Most Popular', 'sortVal': 'likes.count'}];

I then tried displaying sortMethod.displayVal in the select element, and sorting by 

<li ng-repeat="story in feedData|orderBy:sortMethod.sortVal"
, but unfortunately, this seemed to result in an erratic ordering. Is there a way to create visually appealing select options without altering the feedData information? It's worth noting that feedData is provided by a third party and cannot be modified.

javascriptangularjssorting

Answer №1

Great job on focusing on creating the appropriate View Model for sortMethods.

Make sure to utilize ng-options to generate options for your select input. This will allow you to define display values and specify the selected object.

In your situation, consider selecting the complete sortMethod object (assigned to ngModel) while displaying the label of sortMethod.displayVal. Then, use the sortVal for filtering purposes.

Here's how it can be structured:

<select ng-model="selectedSortMethod"
   ng-options="sortMethod as sortMethod.displayVal for sortMethod in sortMethods">
</select>

<li ng-repeat="story in feedData | orderBy:selectedSortMethod.sortVal">
  Panel Count: {{story.frameURIs.length}}
</li>

Next, in the controller section:

// Follow a similar approach as shown below:
$scope.sortMethods = [
   {displayVal: 'Most Recent', sortVal: 'created'},
   {displayVal: 'Most Popular', sortVal: 'likes.count'}
];

$scope.selectedSortMethod = $scope.sortMethods[0];

Check out this Plunker demo for reference.

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

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

phpjavascriptjqueryhtmlcombobox

Using Angular's built-in dependency injection with the $resource factory allows for

Question regarding Dependency Injection on factory resource: As far as I know, the following example is the recommended approach for injecting dependencies in Angular1: angular.module('myApp').factory('Resource', Resource); Resource. ...

javascriptangularjsdependency-injection

Initiate a series of tasks and await their completion using RxJS / Redux Observables

My app requires an initialisation action to be fired, followed by a series of other actions before triggering another action. I found a similar question on Stack Overflow However, when attempting this approach, only the initial APP_INIT action is executed ...

javascriptreduxrxjsrxjs6redux-observable

The AngularJS array data is not displaying correctly

I am having trouble displaying comments array data in HTML properly. The data appears the same as it is in the comments array. What could be causing this issue? How should I proceed? <ul class="media-list" ng-controller="dishDetailController as menuCt ...

javascriptangularjs

Angular 5 in conjunction with Keycloak enabling access for non-authenticated users

I have a situation where I need to implement anonymous user access in my app, and for that purpose, I am incorporating the 'keycloak-angular' library along with Angular 5. The documentation instructs me to initialize the application as shown belo ...

javascriptangularkeycloak

I attempted to append a character to a string every two seconds, but unfortunately, it was not successful. There were no errors displayed in the console. This was done within a Vue framework

It seems like a simple task, but for some reason it's not working. I have double-checked the implementation below and everything looks fine with this.showStr += this.mainStr.charAt(i). The issue seems to be related to the connection loop and setTimer. ...

javascriptvue.jssettimeout

What is the process for storing user-provided document names in Firestore database entries?

I'm encountering an issue with my API while trying to utilize Firestore for inputting data for login and registration via the API. The problem arises when attempting to add a document entry in the database with the user's input email during regis ...

javascriptfirebaseapigoogle-cloud-firestore

Render and download the file concurrently while displaying the view in Express

I'm looking to accomplish a task in Express where I can render a file and download it simultaneously. My current code looks like this: res.attachment('filename.csv'); res.render('pages/result', { data }); However, with this setu ...

javascriptnode.jsexpressejs

Utilizing Lodash efficiently with tree shaking

After experimenting with using lodash functions as a specific import versus as a destructured object, I noticed a significant difference in file size. When imported as shown below, the size is only 14.7KB. However, when I tried importing as a destructured ...

javascriptreactjstree-shaking

Global Redirect Pro is a cutting-edge redirection tool that

Check out the code below which successfully edits a link to redirect users to a specific website based on their location. I'm interested in enhancing this code in two ways: $(window).load(function () { $.getJSON('http://api.wipmania.com/json ...

javascriptjquery

Receive emails: using the require() function with ES Module

After following the react-email documentation, I encountered an error when trying to run the yarn email command: $ email dev --port 3001 ***\node_modules\ora\index.js:65 if (process.platform === 'win32') { ...

javascriptreactjsnext.jsjsx

What is the purpose of utilizing these three JavaScript function parameters?

I've been researching JavaScript functions and arguments, but I haven't found anything that fully explains a function like the one below. For reference, you can check out the original tutorial. In createPuppy, there are three arguments: req, res ...

javascriptnode.jspostgresqlexpresspg-promise

Click on the checkboxes to the left labeled "Mark"

https://i.stack.imgur.com/2u1dI.png In designing a permission management form for user access, the concept I have in mind is as follows: When "Manage" is selected, the options for view/edit/lend should also be automatically selected and disabled. If any ...

javascriptjquery

What is the best way to partially populate a dropdown list using the ng-select directive?

Is there a way to add multiple select options to an existing select element with predefined options, while also controlling the order in which these new options appear? In this modified simple example taken from AngularJS:Select, an additional option with ...

angularjsangularjs-directiveangularjs-ng-repeat

JS Difficulty with Applying Underline in Contenteditable

Recently, I encountered a glitch with document.execCommand that seems puzzling. Allow me to explain the situation at hand. $("#underline-btn").click(function() { document.execCommand("underline"); }); <script src="https://ajax.googleapis.com/ajax/l ...

javascriptjqueryhtmlcontenteditableexeccommand

Can anyone offer me advice on troubleshooting a failed Capifony deployment caused by a time out during the assetic:dump process?

$ cap deploy Unfortunately, the deployment process is failing and I am receiving the following error message: * executing "cd /var/www/site/prod/releases/20120831164520 && php app/console assetic:dump web --env=prod --no-debug" servers: ["site ...

javascriptdeploymentsymfonyyuicapifony

Guide to Implementing a Single Trigger Click with jQuery for Window Scrolling

I have implemented JavaScript code for a button that loads additional posts from the database. The button has the class of .getmore. My goal now is to enable infinite scroll so that users do not have to manually click the button. In order to achieve this ...

javascriptjqueryajax

What is preventing me from making a call to localhost:5000 from localhost:3000 using axios in React?

I have a React application running on localhost:3000. Within this app, I am making a GET request using axios to http://localhost:5000/fblogin. const Login = () => { const options = { method: "GET", url: "http://localhost:5000/fblogin", ...

javascriptreactjsexpressmern

Designing a menu header against a specific background color resulting in misalignment

I have been working on creating a menu header for my website. If you would like to take a look, here is the link to my jsfiddle page. Unfortunately, I am facing an issue where all my images and text should remain in that grey color scheme but somehow it& ...

javascriptjqueryhtmlcss

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

After upgrading my Angular application from version 8 to 12, I encountered an issue. Previously, when I ran ng serve, the application would start the server without any errors. However, after updating to v12, I started receiving an error when I attempted t ...

javascriptangularangular-cli