ng-repeat filter not updating on scope change

StackOverflow https://stackoverflow.com/questions/23416882

Вопрос

Just learning angular, so please excuse the noob nature of this question . . .

I have a list of posts that I want to filter, either alphabetically or based on age (oldest first or youngest first). My code was working before I moved my html into a directive template. Now it's not. Pretty clear that I'm missing something w/r/t the digest cycle.

Check out this plunker to see the problem in action. As you can see, both $scope.predicate and $scope.reverse are being updated, but the filter isn't re-triggering.

HTML: 

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

<body>
  <div posts></div>
</body>

JS:

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

app.controller('postsCtrl', ["$scope", function($scope) {

function getPosts() {
  return [{
    "title": "bbbBloter",
    "createdOn": new Date()
  }, {
    "title": "cccBloter",
    "createdOn": new Date(1360000000000)
  }, {
    "title": "aaaBloter",
    "createdOn": new Date(1290000000000)
  }, {
    "title": "dddBloter",
    "createdOn": new Date(1390000000000)
  }, {
    "title": "abcBloter",
    "createdOn": new Date(1280000000000)
  }, ];
}

//load each blotter, then get each blotters' posts, and then set-up the blotter init values
function init() {
  $scope.posts = getPosts();
  $scope.predicate = 'story.last_posting';
  $scope.reverse = true;
  $scope.orderProp = "last_posting";
}

//user has requested a different sorting
$scope.changeSort = function(sortingOn) {
  switch (sortingOn) {
    case "title":
      $scope.predicate = 'story.title';
      $scope.reverse = false;
      break;
    case "last_posting":
      $scope.predicate = 'story.last_posting';
      $scope.reverse = true;
      break;
    case "first_posting":
      $scope.predicate = 'story.last_posting';
      $scope.reverse = false;
      break;
  }
};

init();

}]);

app.directive('posts', function($filter) {
return {
  replace: true,
  template: 
  '<div ng-controller="postsCtrl">' +
    '<div>' +
      'Search: <input ng-model="query">' +
      'Sort by:' +
      '<select ng-model="orderProp" ng-change="changeSort(orderProp)"   >' +
        '<option value="title">Alphabetical</option>' +
        '<option ng-selected=true value="last_posting">Newest</option>' +
        '<option value="first_posting">Oldest</option>' +
      '</select>' +
    '<br>predicate:{{predicate}}; reverse:{{reverse}}<br>' +
    '<ul>' +
      '<li debug ng-repeat="post in posts | filter:query | orderBy:predicate:reverse">' +
        '{{post.title}}' +
        '<p>{{post.createdOn}}</p>' +
      '</li>' +
    '</ul>' +
    '</div>' +
  '</div>',
  link: function(scope){
    scope.$watch("reverse", function(){
      console.log(scope);
    });
  }
};
}
);

Это было полезно?

Решение 3

You need to remove the story. from the predicate expressions. I think that this was something you left behind when you move to the directive.

I've forked your plunker here

Другие советы

This isn't about digest cycles. What you assign to predicate has nothing to do with your data.

Here's a working plunker.

I changed this part:

$scope.changeSort = function(sortingOn) {
  switch (sortingOn) {
    case "title":
      $scope.predicate = 'title';
      $scope.reverse = false;
      break;
    case "last_posting":
      $scope.predicate = 'createdOn';
      $scope.reverse = true;
      break;
    case "first_posting":
      $scope.predicate = 'createdOn';
      $scope.reverse = false;
      break;
  }
};

Your "predicates" are story.title and story.last_posting. The structure of the items is

  {
    "title": "bbbBloter",
    "createdOn": new Date()
  }

Given that there is no "story" property in the items, it's thus impossible to sort by story.title.

Change your predicates to title and createdOn, and everything will go fine.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top