javascript - Angular.js 中的过滤指令

Question

我正在尝试开发一个单一的网络应用程序，它是一个博客，显示帖子。它们通过 ng-repeat 指令包含在模板中:

   <div class="post" data-ng-repeat="post in postList ">
        <div class="date">published: {{post.published_at | date:'dd-MM-yyyy, HH:mm'}}</div>
            <a class="btn btn-default" data-ng-click="editPost(post)"><span class="glyphicon glyphicon-pencil"></span></a>
            <a class="btn btn-default" data-ng-click="deletePost(post)"><span class="glyphicon glyphicon-remove"></span></a>
            <h1><a href="">{{post.title}}</a></h1>
            <p>{{post.text}}</p>
        </div>
   </div>      

它们具有在 Controller 中定义的字段，例如标题、文本和发布日期。我想按各种标准过滤它们。为此，我尝试实现自己的自定义过滤器(以便我可以按多个字段进行过滤):

angular.module("blog").
filter('bytitle', function() {
return function(posts, title) {
  var out = [];
  // Filter logic here, adding matches to the out var.
  var i;
  for(i = 0; i < posts.length; i++){
     if(posts[i].title.indexOf(title) >=0){
        out.push(posts[i]);
     }
  }
  return out;
}
});

但是，如果我运行 javascript 控制台，则会收到以下错误，该错误仅由上述代码的存在引起:

Argument 'postController' is not a function, got undefined

我是Angular的新手，我不太确定这意味着什么。有什么想法吗？

整个源代码:http://plnkr.co/edit/suATcx8dQXZqcmmwlc0b?p=catalogue

编辑2:问题已部分解决。我添加了这个过滤器功能:

 <div class="post" data-ng-repeat="post in postList | bytitle : filterTerm">

但是运行脚本时出现问题:

TypeError: Cannot read property 'length' of undefined

它出现在第 7 行(带有 posts.length 的行)。

Answer 1

在使用过滤器的文件中 angular.module("blog", []) 您需要 angular.module("blog")。
在第一种情况下 - 您在第二种情况下创建模块 - 获取。

参见doc :

When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.

旁注:在 plunker 中，您对 js 文件的引用错误

您的length属性有错误，因为在通过ajax加载帖子之前，您没有初始化此变量，因此在过滤器中传递了未定义。

您可以修改过滤器，例如

angular.module("blog").
filter('bytitle', function() {
  return function(posts, title) {
    var out = [];

    //if not pass posts - return empty
    if(!posts) return out;

    //if not pass title, or it empty - return same collection
    if(!title) return posts;

    // Filter logic here, adding matches to the out var.
    var i;
    for (i = 0; i < posts.length; i++) {
      if (posts[i].title.indexOf(title) >= 0) {
        out.push(posts[i]);
      }
    }
    return out;
  }
});

var app = angular.module("blog", []);

app.controller("postController", function($scope, $http, $timeout) {

  var path = 'http://private-79b25-blogtt.apiary-mock.com';
  $scope.titleFilter = "";
  $scope.contentFilter = "";

  
  $http.get(path + '/posts')
    .success(function(data, status, headers, config) {
      $timeout(function() {
        $scope.postList = data;
      });
    })
    .error(function(data, status, headers, config) {
      console.log("error getting " + status);
    });
  $scope.form_header = "New post";

  $scope.addPost = function() {
    var post = {
      title: $scope.title,
      text: $scope.text,
      published_at: new Date()
    };

    $http.post(path + '/posts', post)
      .success(function(data, status, headers, config) {
        $scope.postList.push(post);
      })
      .error(function(data, status, headers, config) {
        console.log("error posting " + status);
      });

    $scope.title = "";
    $scope.text = "";
  };

  $scope.deletePost = function(post) {
    var del = confirm("Are you sure you want to delete or modify this post?");
    if (del) {
      var i = $scope.postList.indexOf(post);
      $scope.postList.splice(i, 1);
    }
  };

  var backupPostContent;
  $scope.editPost = function(post) {
    $scope.deletePost(post);
    $scope.form_header = "Edit post";
    $scope.title = post.title;
    $scope.text = post.text;
    backupPostContent = post;
  };

  $scope.cancelEdit = function() {
    $http.post(path + '/posts', backupPostContent)
      .success(function(data, status, headers, config) {
        $scope.postList.push(backupPostContent);
        $scope.form_header = "New post";
      })
      .error(function(data, status, headers, config) {
        console.log("error posting " + status);
      });
    $scope.title = "";
    $scope.text = "";
  };


  $scope.filter = function(term) {

  }


});


angular.module("blog").
filter('bytitle', function() {
  return function(posts, title) {
    var out = [];

    if(!posts) return out;

    if(!title) return posts;
    // Filter logic here, adding matches to the out var.
    var i;
    for (i = 0; i < posts.length; i++) {
      if (posts[i].title.indexOf(title) >= 0) {
        out.push(posts[i]);
      }
    }
    return out;
  }
});

#wrap {
  width: 600px;
  margin: 0 auto;
}
#left_col {
  float: left;
  width: 300px;
}
#right_col {
  float: right;
  width: 300px;
}
body {
  padding: 0px 15px;
}
.row-centered {
  text-align: right;
}
.page-header {
  background-color: #cb892c;
  margin-top: 0;
  padding: 20px 20px 20px 40px;
}
.page-header h1,
.page-header h1 a,
.page-header h1 a:visited,
.page-header h1 a:active {
  color: #ffffff;
  font-size: 36pt;
  text-decoration: none;
}
.content {
  margin-left: 40px;
}
h1,
h2,
h3,
h4 {
  font-family: Helvetica, sans-serif;
}
.date {
  float: right;
  color: #828282;
}
.save {
  float: right;
}
.post-form textarea,
.post-form input {
  width: 60%;
}
.top-menu,
.top-menu:hover,
.top-menu:visited {
  color: #ffffff;
  float: right;
  font-size: 26pt;
  margin-right: 20px;
}
.post {
  margin-bottom: 70px;
}
.post h1 a,
.post h1 a:visited {
  color: #000000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="blog" ng-controller="postController">
  <div id="wrap">
    <div id="left_col">
      <h3> Search </h3>
      <p>
        <input data-ng-model="filterTerm" />
      </p>
    </div>
    <div id="right_col">
      <div id="wrap">
        <div id="left_col">
          <input type="checkbox" value="topic" id="title" ng-model="titleFilter" />In topics
          <br>
          <input type="checkbox" value="content" id="content" />In contents
          <br>
          <input type="checkbox" value="content" id="content" />In tags
          <br>Between
          <input type="text" type="text" class="datepicker" />
        </div>

        <div id="right_col">
          <br>
          <br>
          <br>and
          <input type="text" type="text" class="datepicker" />
          <br/>
        </div>
      </div>
    </div>
  </div>
  <div class="content container" style="padding-top: 50px">
    <div class="row">
      <div class="col-md-8 col-centered">
        <div class="post" data-ng-repeat="post in postList | bytitle : filterTerm ">
          <div class="date">published: {{post.published_at | date:'dd-MM-yyyy, HH:mm'}}</div>
          <a class="btn btn-default" data-ng-click="editPost(post)"><span class="glyphicon glyphicon-pencil"></span></a>
          <a class="btn btn-default" data-ng-click="deletePost(post)"><span class="glyphicon glyphicon-remove"></span></a>
          <h1><a href="">{{post.title}}</a></h1>
          <p>{{post.text}}</p>
        </div>
      </div>
      <div class="col-md-4 col-centered">
        <h1>New post</h1>
        <form class="post-form">
          <h4>Title:</h4>
          <p>
            <input type="text" name="title" data-ng-model="title">
          </p>
          <h4>Text:</h4>
          <p>
            <textarea name="text" data-ng-model="text"></textarea>
          </p>
          <button type="submit" class="save btn btn-default" ng-click="addPost()">Save</button>
          <button type="reset" class="btn btn-default">Clear</button>
          <button type="button" class="btn btn-default" ng-click="cancelEdit()">Cancel edit</button>
        </form>
      </div>
    </div>
  </div>
</div>