CODEWITHSUNDEEP
javascriptangularjs
Pravin
Pravin

Reputation: 441

How to pass the chosen dropdown value to ng-repeat orderby

I have created normal dropdown box.In that I need to pass the selected value to ng-repeat orderby for filtration.

This 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>

Angular js 

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

Now how can i pass that selected value to ng-repeat orderBy:' '?

Upvotes: 0

Views: 618

Answers (2)

Faaz Iqbal
Faaz Iqbal

Reputation: 11

Considering that your sample data has "mrp" and "qty" properties, the following should solve your problem

<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>

You need to set the option values of your select box as per your "sample" object properties, then bind the value of your select box to "orderProp" which you will in turn bind with your ng-repeat directive using orderBy filter.

Upvotes: 0

hungndv
hungndv

Reputation: 2141

I do an example which is the same as your problem here:

    angular.module('orderByExample', [])
      .controller('ExampleController', ['$scope',
        function($scope) {
          $scope.friends = [{
            name: 'John',
            phone: '555-1212',
            age: 10
          }, {
            name: 'Mary',
            phone: '555-9876',
            age: 19
          }, {
            name: 'Mike',
            phone: '555-4321',
            age: 21
          }, {
            name: 'Adam',
            phone: '555-5678',
            age: 35
          }, {
            name: 'Julie',
            phone: '555-8765',
            age: 29
          }];
          $scope.predicates = ['name', 'phone', 'age'];
          $scope.predicate = 'name';
        }
      ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="orderByExample" ng-controller="ExampleController">
  <select ng-model="predicate" ng-options="p as p for p in predicates"></select>
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>
</div>

Please refer here: https://docs.angularjs.org/api/ng/filter/orderBy

Hope this help.

Upvotes: 2

Related Questions