如何将选定的下拉值传递给ng-repeat orderby

时间:2015-07-05 13:20:17

标签: javascript angularjs

我创建了正常的下拉框。我需要将选定的值传递给ng-repeat orderby进行过滤。

这是我的下拉列表

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

现在我如何将选定的值传递给ng-repeat orderBy:&#39; &#39;?

2 个答案:

答案 0 :(得分:2)

我做了一个与你的问题相同的例子:

&#13;
&#13;
    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';
        }
      ]);
&#13;
<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>
&#13;
&#13;
&#13;

请参阅此处:https://docs.angularjs.org/api/ng/filter/orderBy

希望得到这个帮助。

答案 1 :(得分:0)

考虑到您的示例数据具有“mrp”和“qty”属性,以下内容应该可以解决您的问题

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

您需要根据“样本”对象属性设置选择框的选项值,然后将选择框的值绑定到“orderProp”,然后使用orderBy过滤器将其与ng-repeat指令绑定