[AngularJS] Filter filter Ex
Filter All the Things
Let's start cleaning up our notes tweeted page using filters.
On the notes tweeted page, within the tweeted.html
template, use filter
to display only notes that have been tweeted (i.e., having a tweeted
property set to true
).
<div class="note-wrapper"> <div class="note-content"> <div class="notes-header"> <h1 title="Notes">Tweeted Notes</h1> <input type="search" ng-model="searchTerm"/><label>Search</label> </div> <div class="note-wrapper"> <a class="card-notes" ng-repeat="note in notes | filter: {tweeted: true}" ng-href="#/notes/{{note.id}}"> <div class="card" title="{{note.title}}"> <h2 class="h3">{{note.title}}</h2> </div> </a> </div> </div> </div>
Chaining Filters
The notes tweeted page has a search field so that users can filter notes. Let's take advantage of this using another filter.
Add an additional search
filter to the displayed notes on our notes tweeted page.
<div class="note-wrapper"> <div class="note-content"> <div class="notes-header"> <h1 title="Notes">Tweeted Notes</h1> <input type="search" ng-model="searchTerm"/><label>Search</label> </div> <div class="note-wrapper"> <a class="card-notes" ng-repeat="note in notes | filter: {tweeted: true} | filter: searchTerm" ng-href="#/notes/{{note.id}}"> <div class="card" title="{{note.title}}"> <h2 class="h3">{{note.title}}</h2> </div> </a> </div> </div> </div>
A Date Filter
The tweetedDate
is now being displayed on each tweeted note card. Let's format it! See the Angular documentation for the appropriate elements to compose the format string.
Use a filter to display the tweeted date in our p
tag like so: Tweeted on a Monday in October
.
<div class="note-wrapper"> <div class="note-content"> <div class="notes-header"> <h1 title="Notes">Tweeted Notes</h1> <input type="search" ng-model="searchTerm"/><label>Search</label> </div> <div class="note-wrapper"> <a class="card-notes" ng-repeat="note in notes | filter: {tweeted: true}" ng-href="#/notes/{{note.id}}"> <div class="card" title="{{note.title}}"> <h2 class="h3">{{note.title}}</h2> <p>{{ note.tweetedDate | date: "'Tweeted on a' EEEE 'in' MMMM" }}</p> </div> </a> </div> </div> </div>
It's the middle of the night and you are ready to finish your Angular NoteWrangler
app! You realize the title
of our card container div
would be more beneficial if it included a fancy date along with the title
of the note.
Add the date to the end of the title
and format it like so: Oct. 08
.
<div class="note-wrapper"> <div class="note-content"> <div class="notes-header"> <h1 title="Notes">Tweeted Notes</h1> <input type="search" ng-model="searchTerm"/><label>Search</label> </div> <div class="note-wrapper"> <a class="card-notes" ng-repeat="note in notes | filter: {tweeted: true}" ng-href="#/notes/{{note.id}}"> <div class="card" title="{{note.title}} {{note.tweetedDate | date: 'MMM. dd'}}"> <h2 class="h3">{{note.title}}</h2> <p>{{ note.tweetedDate | date: "'Tweeted on a' EEEE 'in' MMMM" }}</p> </div> </a> </div> </div> </div>
相关文章
- 【跟唐老师学习云网络】-第8篇 iptables - filter过滤功能
- ASP.NET Core 中间件 中间件(Middleware)和过滤器(Filter)的区别
- [AngularJS + Webpack] Using Webpack for angularjs
- angularjs filter详解
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
- [Typescript] 103. Hard - Tuple Filter
- [AngularJS + Webpack] Using Webpack for angularjs
- angularjs 过滤器filter
- SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍
- smart filter无法从smart business应用获得值的问题分析
- Qt Event 以及 Event Filter 事件处理
- FFmpeg Filter简单使用
- jQuery -> filter使用方法