Question

只是学习角度，所以请原谅这个问题的noob性质。。

我有一个我要过滤的帖子列表，可以按字母顺序或根据年龄（最早的第一个或最年轻的第一个）进行过滤。在将html移动到指令模板之前，我的代码正在运行。现在不是。非常清楚，我遗漏了消化周期的东西。

查看此plunker以查看问题的实际效果。如您所见，$ scope.predicate和$ scope.reverse都在更新，但过滤器没有重新触发。

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);
    });
  }
};
}
);

Answer 1

这不是关于摘要周期。您分配给predicate的内容与您的数据无关。

这是一个有效的plunker。

我改变了这一部分：

$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;
  }
};

Answer 2

您的“谓词”是story.title和story.last_posting。项目的结构是

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

鉴于项目中没有“故事”属性，因此无法按story.title排序。

将您的谓词更改为title和createdOn，一切都会顺利。

Answer 3

您需要删除故事。来自谓词表达式。我认为这是你转向指令时留下的东西。

我分叉了你的傻瓜here

ng-repeat过滤器不会更新范围更改

3 个答案: