フィルターを使おう (2/6)
作成:2015-12-19 19:17
更新:2015-12-19 19:17
更新:2015-12-19 19:17
■プログラムを用意する
では、フィルターを利用したサンプルを作ってみましょう。まずは、プログラムから作成します。前回まで利用したHTMLファイルとscript.jsをそのまま再利用することにしましょう。
下に、プログラムの簡単なサンプルコードを掲載しておきます。script.jsをこのように書き換えて下さい。
今回は、HeloControllerクラスにcount、data、getDataといったプロパティとメソッドを用意してあります。dataは、ごく簡単なカタログのようなものをイメージしてください。ID、名前、価格、そして持っているかどうかを示す真偽値、登録日時といった情報をまとめてあります。登録日時は、タイムスタンプの整数値として用意してあります。
このdataのデータをテンプレートで表示する際に、フィルターを利用することにしましょう。
下に、プログラムの簡単なサンプルコードを掲載しておきます。script.jsをこのように書き換えて下さい。
今回は、HeloControllerクラスにcount、data、getDataといったプロパティとメソッドを用意してあります。dataは、ごく簡単なカタログのようなものをイメージしてください。ID、名前、価格、そして持っているかどうかを示す真偽値、登録日時といった情報をまとめてあります。登録日時は、タイムスタンプの整数値として用意してあります。
このdataのデータをテンプレートで表示する際に、フィルターを利用することにしましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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; }; } );
※関連コンテンツ