AngularJS – Directive & Filter 介紹篇




<html ng-app="store">


<body ng-controller="StoreController as store">


<h1 ng-show="name">Hello, {{ name }} !</h1>


<li ng-repeat="product in store.products">{{ }}</li>
AngularJS Part4 Slide1


AngularJS Part4 Slide2


AngularJS Part4 Slide3

我們也可以在過濾器後面利用冒號再加上一些選項,讓呈現的資料更不同,例如下圖中date格式中是以「月/日/年 @ 時:分AM」這樣的方式顯示,而除了貨幣currency、日期date的過濾器之外,還包含有大小寫轉換的uppercase、lowercase、字數也可以當成資料呈現筆數的limitTo、另外還有可以針對重複性的資料進行排序的orderBy,大概的使用方式可以參考下圖,或是在JS Bin看看馬老師製作的案例。

AngularJS Part4 Slide4


AngularJS Part4 Slide5

在頁面上顯示圖片的方式要注意不是用src的屬性去呈現,而是需要用ng-src這個屬性,加上圖片欄位的表達式即可,在JS Bin上面觀賞本案例程式碼。

AngularJS Part4 Slide6


You may also like...

9,196 Responses

  1. The Writing has become a go-to resource for me. The effort you put into The posts is truly appreciated.

  2. Twila Hahn表示:

    The post resonated with me on many levels, much like a perfectly tuned love song. Thanks for the harmony.

  3. Diplom_seKl表示:

    купить свидетельство о рождении ссср купить свидетельство о рождении ссср .

  4. twerk hub表示:

    Thanks a bunch for sharing this with all folks you actually understand what you’re speaking approximately! Bookmarked. Kindly additionally visit my web site =). We will have a hyperlink trade contract among us!

  5. Always excited to see The posts, like waiting for a message from a crush. Another excellent read!

  6. Always excited for The posts, because who else is going to make me feel this inadequately informed?

  7. You made some first rate factors there. I regarded on the internet for the problem and found most individuals will go along with along with your website.

  8. игровой автомат крейзи манки игровой автомат крейзи манки .

  9. You tackle topics with such finesse, it’s like watching a skilled chef at work. Serving up knowledge with flair!

  10. слот крейзи манки .

  11. Vsnxum表示:

    order feldene generic – buy feldene pills buy generic rivastigmine over the counter