Working Plunker

Question

我正在尝试开发一个单独的Web应用程序，它是一个博客，显示帖子。它们由def show @page = Page.find_by_permalink!(params[:id]) if @page.new_permalink.present? redirect_to page_path(@page.new_permalink), status: :moved_permanently return end end指令包含在模板中：

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>

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

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

我是Argument 'postController' is not a function, got undefined的新手，我不确定这意味着什么。有什么想法吗？

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

编辑2：问题部分解决了。我添加了此过滤器功能：

angular

但是在运行脚本时出现了问题：

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

它发生在第7行（TypeError: Cannot read property 'length' of undefined）。

Answer 1

修改

在我做出评论或编辑之前，我没有看到@grundy的回答，所以它应该被接受为答案，但我想指出两件事：

Working Plunker

我首选的方法是使用angular.isDefined / angular.isArray：

angular.module("blog"). filter('bytitle', function() { return function(posts, title) { if(angular.isDefined(title) && angular.isArray(posts)) { 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; } else { return posts; } } });

其次，我只是想指出，虽然编写自己的过滤器有时是必要的，当然也是一个很好的掌握技巧，但过滤单个属性的最简单方法是使用内置过滤器过滤器，方法是将属性添加到要搜索的模型值：

<input data-ng-model="filterTerm.title" /> <input data-ng-model="filterTerm.text" />

然后在重复中使用对象名称添加过滤器，如下所示：

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

然后，您可以对多个属性使用相同的过滤器。

Answer 2

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

请参阅doc：

传递两个或多个参数时，会创建一个新模块。如果只传递一个参数，则检索现有模块（作为模块的第一个参数传递的名称）。

旁注：在plunker中你错误地引用了js文件

length 属性存在错误，因为在通过ajax加载帖子之前，您不会初始化此变量，因此在过滤器中传递 undefined 。

您可以像

一样修改过滤器

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>

Angular.js中的过滤指令

2 个答案:

Working Plunker