Arranging items in Angular based on selection from the database

i have data in table: Id, word, score , score_list.

score are 0.4, 0.2, -0.5, 0, -0.3 ....

in score_list i have positive, negative , neutral.

How can i sort data with select by score_list?

This is html

<select class="form-control">
<option>all</option>
<option>positive</option>
<option>negative</option>
<option>neutral</option>
</select>

<ul class="list">
    <li ng-class="{positive: item.score > 0, negative: item.score < 0, neutral}" ng-repeat="item in words | orderBy: sort | filter: search ">
     {{item.word}} {{item.score}}
     </li>
 </ul>

Is there any quick way to organize it.

in Js i have this:

http.get('select.php')
   .success(function(data){
       $scope.words = data;
 })

Answer №1

What method would you like to use for sorting the numbers? Are you looking to implement it solely in HTML or do you need some backend code as well? If using controller is an option, then the process becomes quite simple. You can utilize ng-click on your select options like this:

<select ng-click='executeFunction()'> positive <select>

In the corresponding controller, you can store the response data in an array and employ the function executeFunction() to manipulate the data. For instance-

Assuming that your data is contained within an array named var numbers[], you could proceed as follows:

$scope.sorted = [];
$scope.executeFunction = function(){ 
  for(var i=0; i<numbers.length; i++){
    if(numbers[i]>0){
      $scope.sorted.push(numbers[i]);
    }
  }
};

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

Tips for postponing the execution of following tasks until the completion of the setState and ensuring that they are reliant on

I'm encountering an issue with the useEffect hook in my React app that uses useState. Here's the code snippet: const [jobTypes, setJobTypes] = useState([]); const getJobTypes = async () => { try { const response = await fetch(&a ...

What sets server-side development apart from API creation?

As I dive into the world of web development, I find myself facing some confusion in my course material. The instructor has introduced concepts like promise objects and fetch, followed by axios, and now we're delving into the "express" package for buil ...

Efficiently Encoding Still Image Data for NextJS

Currently, I am experimenting with a completely static method in my new Next.js v12 project. I am creating 5-6 data files to use with getStaticProps. Here is an example of one of the data file structures (they are all similar): import SqAshland1 from &apos ...

Facing Problem with Angular PUT Request - "Missing required request body"

I'm encountering a problem with my Angular application when attempting to send a PUT request to the server. The error message I receive reads "Required request body is missing." Below is a snippet of the code that is relevant: Within the Child Compo ...

Issue encountered in AngularJS: struggling to store the localStorage item in the scope variable

I've been trying to save the values from window.localStorage.getItem('job_id.done_tasks') into a $scope variable, but I'm encountering difficulties. Can you please review my code? $scope.done_tasks = {}; $scope.done_tasks = window.loca ...

Issue: ArrayBuffer failing to function properly in conjunction with Float64Array in NodeJS

Having some trouble with getting a Float64Array to work with an array buffer in Node. Here's what I've tried... var ab = new ArrayBuffer(buffer.length); var view = new Uint8Array(ab); console.log(view.length);//prints 3204 However, when I try ...

($rootScope: busy) Applying changes right now

Whenever I try to make changes to the UI grid after refreshing the data, I keep encountering this error message: angular.js:13236 Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.5.0/$rootScope/inprog?p0=%24apply ...

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

Tips on displaying hyperlinks within a text area in an Angular application

In my Angular application, I am facing an issue with displaying hyperlinks within a text area box for dynamic content. The hyperlinks are not recognized and therefore cannot be clicked. Can someone please advise on how to properly display hyperlinks with ...

Is it possible for the children of a Three.js scene to have matrix positions that differ from the children of those children?

I am facing an issue with my ferris wheel. The baskets on the wheel are not aligning correctly when the scene is rotated: https://i.sstatic.net/Ek1mT.png Everything functions as intended until the scene is rotated, causing the baskets to misalign with th ...

Adjust the color of a DIV based on the text value retrieved from an external source

I am looking to dynamically change the text color between red and green based on a numeric value received from an external source (API). If the value is greater than or equal to 50, it should be displayed in red. If it's less than 50, then it should ...

JavaScript is not being loaded onto the client by Express

I am looking to incorporate requireJS into my client code. Here is my file structure: ProjectRoot |-server.js |-public/ |-index.html |-js/ |-app.js |-lib/ |-require.min.js |-underscore.js |-backbone.js ...

How to Use Jquery to Perform Subtraction on Elements

Hello everyone! I am currently working on creating a nutrition label similar to this one: Example I have set up my database and now I am focusing on getting it to work with one element before moving on to the rest. Here is what my database looks like: in ...

Exploring the possibilities of combining AngularJS with a Bootstrap modal for a

Hello, I am currently attempting to update a modal select box using Angular and Bootstrap modals. Unfortunately, when I click the button, I am having trouble getting it to update the related select box value in the Bootstrap modal. I've tried differ ...

Methods to troubleshoot problem of angular component loading issue in firefox with ViewEncapsulation.Native

I am encountering a problem with loading an angular component using ViewEncapsulation.Native in firefox, edge, and ipad chrome. Interestingly, there is no issue on safari on mac, chrome on windows, or chrome on android. Error: hostEl.createShadowRoot is ...

What is the best way to automatically set today's date as the default in a datepicker using jQuery

Currently utilizing the jQuery datepicker from (http://keith-wood.name/datepick.html), I am seeking to customize the calendar to display a specific date that I select as today's date, rather than automatically defaulting to the system date. Is there a ...

Is there a way for me to retrieve dynamic text?

I used an "IF" statement to display dynamic text - if it's null, show something, otherwise show something else. However, I am getting a blank result. What did I do wrong? <View style={styles.rightContainer}> { () =>{ if(t ...

Incorporating a dynamic fill effect into an SVG pie chart

I am looking to animate a pie chart with a variable value that is unknown upon loading. Assuming I fetch the value promptly and convert it into a rounded percentage : var percentage = Math.round(sum * 100 / total); Next, I place this value here : <di ...

What is the best way to seek verification when relocating a node within Angular's UI Tree?

Is there a way to prompt for confirmation when moving a node in Angular UI Tree? When moving a node between trees, is there a method to display a confirmation message? I attempted to utilize the dragStop callback. <div data-ui-tree="treeOptions" id= ...

Top techniques for dynamic loading of HTML and Javascript

I recently implemented a page that uses XHR requests to load a modal box containing a form. The form is comprised of HTML tags along with some JavaScript for validation and submission through another XHR request. Although the functionality works as intend ...