Geek Answers Handbook

Execute orderBy when the dropdown is selected angular

I have a drop down list consisting of a name and an address. if a name is selected, my list should be sorted with the name. My code is not working properly. Order By

<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">
+4
source share
2 answers

You just need to use the ng model instead of the ng-change () event. The code also has some other problems, for example, you need to provide an ng model only for the selected tag. I think you might need to rethink some angular basics. I showed how this can work below. the select tag will be attached to sortBy, and the same one is used in the orderBy filter

<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">
+3
source

, , . , !:)

, 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

+2

More articles:


All Articles