当选择下拉列表时,执行orderBy

时间:2014-08-08 05:23:56

标签: angularjs

我有一个包含姓名和地址的下拉列表。如果选择了name,那么我的列表应该按名称排序。 我的代码无法正常工作。订购方式

<div class="col-xs-2">
        <select class="form-control" ng-change="changedvalue()" ng-model="Tosort.order">
            <option value="None">-- Select --</option>
            <option ng-model="Tosort.order" value="Name">Name</option>
            <option ng-model="Tosort.order" value="Address">Address</option>
        </select>
    </div>
<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sort.value">

2 个答案:

答案 0 :(得分:3)

您只需使用ng-model而不是ng-change()事件。您的代码中还存在一些其他问题,例如您只需要在select标记上提供ng-model。我想你可能需要重新审视一些角度基础知识。我已经展示了它如何在下面工作。 select标签将绑定到&#34; sortBy&#34;并且在&#34; orderBy&#34;中使用相同的过滤

<div class="col-xs-2">

        <select class="form-control" ng-model="sortBy">
            <option value="None">-- Select --</option>

            <option value="Name">Name</option>
            <option value="Address">Address</option>

        </select>
    </div>



<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sortBy">

答案 1 :(得分:2)

当我还在写我的榜样时,我看到你得到了很多答案。该死的你快! :)

无论如何,这将是HTML的内容

<body ng-controller="MyCtrl">
  <div>
    <!-- text input for filtering -->
    <label>Country filter</label>
    <input type="text" ng-model="countryFilter"></input>

    <!-- options to order (filtered) results -->
    <label>Order by</label>
    <select ng-model="selectedOrder" ng-options="option for option in options"></select>
  </div>

  <ul>
    <!-- show results: filter by country name and order by selected property name -->
    <li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>    
  </ul>
</body>

这将是相关的控制器

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope) {      
  // order by options
  $scope.options = ['country', 'address'];

  // all countries
  $scope.details = [{
    id:1, country:'Country 1', address:'Address C'
  },{
    id:2, country:'Country 2', address:'Address B'
  },{
    id:3, country:'Country 3', address:'Address A'
  }];
});

为了将来的参考,请在此工作http://plnkr.co/edit/02Y3b7