CODEWITHSUNDEEP
javascriptangularjs
wyc
wyc

Reputation: 55283

sortBy not sorting items in directive table

HTML:

<select class="form-control" ng-model="sortBy">
  <option value="createdAt"><strong>Date</strong></option>
  <option value="ProgressStateNumber"><strong>Progress</strong></option>
  <option value="adminUsername"><strong>adminUsername</strong></option>
</select>

<tbody>
  <tr
    reportrowgroup
      ng-repeat="report in reportTree track by $index | orderBy: sortBy"
      report="report"
    >

Directive:

  .directive('reportrowgroup', function () {
    return {
      restrict: 'EA',
      template:
        '<td>{{report.createdAt | date:"yyyy-MM-dd HH:mm"}}</td>'+
        'MORE HTML'
        scope: {
            report: '='
        },
        controller: function() {
        },
        link: function(scope,elem,attr,ctrl) {
      }
        }
    }
})

Everything works, except the table doesn't sort by createdAt when I select createdAt in select.

What could be the problem?

Upvotes: 1

Views: 35

Answers (1)

null
null

Reputation: 7926

Your reportrowgroup directive is creating a new scope and therefore missing the reference to the same sortBy variable. Try wrapping the sortyBy in an object.

<!-- markup -->
<select class="form-control" ng-model="input.sortBy">

// Code
angular.module('myApp').controller('MyController', function($scope) {
  $scope.input = {
    sortBy: 'default-value-goes-here'
  };
});

See this plunker: http://plnkr.co/edit/MmjuaLfvVnOQb0Ngz0dI?p=preview

Upvotes: 1

Related Questions