Here are the steps to pass the selected dropdown value to ng-repeat for ordering:

Question

Here are the steps to pass the selected dropdown value to ng-repeat for ordering:

I have a dropdown box with options for filtering data in an ng-repeat by different criteria. How can I pass the selected value from the dropdown to the ng-repeat orderby?

Here is my dropdown:

<select name='filter_range' id='filter_range' onchange='filter()'>
    <option value='mrplow'> MRP Low To High</option>
    <option value='mrphigh'> MRP High To Low </option>
    <option value='qtyhigh'> Qty Low To High </option>
    <option value='qtylow'> Qty High To Low </option>
</select>

Using AngularJS:

<div ng-app="myApp" ng-controller="MyController"> 
    <div ng-repeat="grp_val in sample | orderBy:selectedValue">
        <label>{{grp_val.product}}</label><br>
    </div>
</div>

How can I dynamically set the orderBy value to the one selected in the dropdown?

javascript angularjs

Answer 1

Answer №1

Let me demonstrate an example that closely resembles your issue:

    const fruits = ['apple', 'banana', 'cherry'];
    console.log(fruits.sort()); // Output: ["apple", "banana", "cherry"]

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<div id="app">
  <p>Original Array: {{fruits}}</p>
  <p>Sorted Array: {{sortedFruits}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fruits: ['apple', 'cherry', 'banana']
  },
  computed: {
    sortedFruits() {
      return this.fruits.sort();
    }
  }
});
</script>

You can find more information at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

I hope this sheds some light on your query.

Answer 2

Let me demonstrate an example that closely resembles your issue:

    const fruits = ['apple', 'banana', 'cherry'];
    console.log(fruits.sort()); // Output: ["apple", "banana", "cherry"]

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<div id="app">
  <p>Original Array: {{fruits}}</p>
  <p>Sorted Array: {{sortedFruits}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fruits: ['apple', 'cherry', 'banana']
  },
  computed: {
    sortedFruits() {
      return this.fruits.sort();
    }
  }
});
</script>

You can find more information at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

I hope this sheds some light on your query.

Answer 3

Answer №2

If the data you are working with contains properties like "mrp" and "qty", this solution should help resolve your issue:

<select ng-model='orderProp' name='filter_range' id='filter_range'   onchange='filter()'>
    <option value='mrp'> MRP Low To High</option>
    <option value='-mrp'> MRP High To Low </option>
    <option value='qty'> Qty Low To High </option>
    <option value='-qty'> Qty High To Low </option>
</select>

<div ng-app="myApp" ng-controller="MyController"> 
    <div  ng-repeat = "grp_val in sample | orderBy: orderProp"
        <label>{{grp_val.product}}</label><br>
    </div>
</div>

Make sure to adjust the option values of your select box based on the properties of your "sample" object, then connect the select box value to "orderProp" which will be used in the ng-repeat directive with the orderBy filter.

Answer 4

If the data you are working with contains properties like "mrp" and "qty", this solution should help resolve your issue:

<select ng-model='orderProp' name='filter_range' id='filter_range'   onchange='filter()'>
    <option value='mrp'> MRP Low To High</option>
    <option value='-mrp'> MRP High To Low </option>
    <option value='qty'> Qty Low To High </option>
    <option value='-qty'> Qty High To Low </option>
</select>

<div ng-app="myApp" ng-controller="MyController"> 
    <div  ng-repeat = "grp_val in sample | orderBy: orderProp"
        <label>{{grp_val.product}}</label><br>
    </div>
</div>

Make sure to adjust the option values of your select box based on the properties of your "sample" object, then connect the select box value to "orderProp" which will be used in the ng-repeat directive with the orderBy filter.

Here are the steps to pass the selected dropdown value to ng-repeat for ordering:

Answer №1

Answer №2

Similar questions

Alerts being used by Jquery Validation Engine to showcase errors

Updating the view manually is necessary when using AngularJS $routeProvider and resolve feature

Tips on eliminating overlapping strokes

The drop-down menu keeps flickering instead of remaining open when clicked

What are the steps to integrating databases with HTML5?

calling object functions using additional parentheses

Having trouble retrieving JSON data from an external URL in AngularJS when making a $http.get call and using the success method?

extract the field name from the json object

Laravel 5.0 facing issues with AJAX requests

Issues with premature execution of Angular JS code have been observed at times

Securely Upload Files with JavaScript

Combining photos seamlessly and bringing them to life through animation upon window loading

Utilizing jQuery's each() function to create a seamless loop of background images in a

Secure an input field for exclusive attention. React

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

Running Javascript based on the output of PHP code

The ideal formats for tables and JavaScript: How to effectively retrieve arrays from a table?

Combine all the HTML, JavaScript, and CSS files into a single index.html file

Ensuring security against cross site scripting attacks on window.location.href

Having trouble opening a JPEG file that was generated using the Writefile Api in Ionic-Cordova