通过侧边栏过滤列表

Filtering a List via a Sidebar

本文关键字:列表 过滤 侧边栏      更新时间:2023-09-26

有两个项目列表。一个给你的博客文章,一个给作者。

var app = angular.module("Blog", []);
app.controller('PostCtrl', function($scope) {
  $scope.posts = <%= @posts.to_json.html_safe %>;
  $scope.authors = <%= @authors.to_json.html_safe %>;
});

信息通过Rails通过数据库提供给我们。如果你不懂Rails,假设你有一大块JSON要处理。

现在,我们列出博客文章:

<div id="blog-posts" ng-controller="PostCtrl">
  <article class="post" ng-repeat="post in posts">
    <h1> {{ post.title }} </h1>
    <small> By {{ post.author }} on {{ post.created_at }} </small>
    <p> {{ post.body }} </p>
  </article>
</div>

然后你决定在#blog-postsdiv中做一个aside(这样它就在PostsCtrl中)来列出作者:

<aside>
  <h2> Authors </h2>
  <ul>
    <li ng-repeat="author in authors">
      {{ author.name }}
    </li>
  </ul>
</aside>

列出这些内容并显示作者,这很好,但是您还希望允许人们根据作者进行筛选。

关键问题:当点击作者时,如何过滤博客文章?

提示:当用户点击作者(ngClick)时,将作者放在一个变量中,然后您可以使用该变量来filter帖子列表