通过侧边栏过滤列表
Filtering a List via a Sidebar
有两个项目列表。一个给你的博客文章,一个给作者。
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-posts
div中做一个aside(这样它就在PostsCtrl中)来列出作者:
<aside>
<h2> Authors </h2>
<ul>
<li ng-repeat="author in authors">
{{ author.name }}
</li>
</ul>
</aside>
列出这些内容并显示作者,这很好,但是您还希望允许人们根据作者进行筛选。
关键问题:当点击作者时,如何过滤博客文章?
提示:当用户点击作者(ngClick
)时,将作者放在一个变量中,然后您可以使用该变量来filter
帖子列表
相关文章:
- Angular:使用选择列表选择过滤代码中的对象
- 条件过滤列表显示在angularjs中
- 使用下拉列表过滤 ng 重复,而不复制下拉选项
- 按AngularJS中名字的第一个字母过滤人员列表
- 转换UL->li inot为同位素过滤菜单选择的列表
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- jQuery移动列表过滤:如何更改清除按钮文本
- 如何在AngularJS中按变量过滤列表
- 过滤具有2个选择列表的元素
- 使用过滤后的“”上的箭头键;ul”;列表
- AngularJS不过滤产品列表
- 根据本地存储中的列表过滤 ng-repeat
- 使用 JavaScript 在数据表 (MVC 3) 中进行选择列表过滤
- 标签列表过滤动画
- 用列表过滤对象列表- Javascript
- 如何通过免费文本和多个下拉列表过滤ng-repeat
- 如何使用下拉列表过滤剑道UI MVC网格
- 如何使用 jQuery 使用菜单列表过滤表数据
- 如何根据预定义的列表过滤json列表
- Emberjs -连接一个{{input}}过滤器栏与我的对象列表.当我输入时,列表过滤