libro
www.tuyano.com
初心者のためのAngularJS入門

フィルターを使おう (2/6)

作成:2015-12-19 19:17
更新:2015-12-19 19:17

■プログラムを用意する

では、フィルターを利用したサンプルを作ってみましょう。まずは、プログラムから作成します。前回まで利用したHTMLファイルとscript.jsをそのまま再利用することにしましょう。

下に、プログラムの簡単なサンプルコードを掲載しておきます。script.jsをこのように書き換えて下さい。

今回は、HeloControllerクラスにcountdatagetDataといったプロパティとメソッドを用意してあります。dataは、ごく簡単なカタログのようなものをイメージしてください。ID、名前、価格、そして持っているかどうかを示す真偽値、登録日時といった情報をまとめてあります。登録日時は、タイムスタンプの整数値として用意してあります。

このdataのデータをテンプレートで表示する際に、フィルターを利用することにしましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

var myapp = angular.module('myapp',[]);
var helo = myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            {id:0,name:'no data',price:0,get:false,date:1450100000000},
            {id:1,name:'Android phone',price:7800,get:true,date:1450400000000},
            {id:2,name:'New iPhone',price:549020,get:false,date:1450200000000},
            {id:3,name:'windows phone',price:38765,get:true,date:1450300000000}
        ];
        this.getData = function(){
            return this.data[this.count].id + ': ' + 
                this.data[this.count].name + ', ' + 
                this.data[this.count].price + '.' +
                this.data[this.count].date;
        };
    }
);
※関連コンテンツ

「初心者のためのAngularJS入門」に戻る