monaca開発メモ3

今回は、

• テキストボックスを含むリストを表示させ、最終行に「合計」を表示。

• テキストボックスの変更で、リアルタイムに「合計」を変更する。

を実現する方法です。

まずは、スクリプトですが、Angularの依存性注入（DI）を使います。
http://js.studio-kingdom.com/angularjs/guide/understanding_services

「MyService」を作成、「listCtrl」にDIします。
リストデータに変更があったら、合計を再計算する為に、

$scope.$watch(watchExpression, listener, [objectEquality]);

を利用します。

var app = angular.module('myApp', ['onsen.directives']);
app.controller('listCtrl',function($scope, MyService){ //MyServiceをDI
    $scope.myList = MyService.getList();
    $scope.summary = 0;
    //myListが変更されたら$scope.summaryに再計算した値を設定する
    $scope.$watch('myList', function(){$scope.summary = MyService.summary()},true);
});

app.factory('MyService', function(){
    var myList = [{'id':1,'item':'100'},{'id':2,'item':'200'}];
    return {
        getList : function(){
            return myList;
        },
        summary : function(){
            var sum = 0;
            for(var vals in myList){
                sum += eval(myList[vals].item);
            }
            return sum;
        }
    };
});

上ではやってませんが、実際は、minify対策した方がいいらしいです。
http://qiita.com/kawaz/items/363f430d21ec729f1b7d

HTMLは以下のようにします。

<div ng-controller="listCtrl">
    <ons-list id="list">
        <ons-list-item ng-repeat='value in myList'>
            <ons-row align="center">
                <ons-col>
                    <div>
                        <span>{{value.id}}</span>
                    </div>
                </ons-col>
                <ons-col>
                    <div>
                        <input size="5" ng-model='value.item' class="text-input">
                    </div>
                </ons-col>
            </ons-row>
        </ons-list-item>
    </ons-list>
    <ons-list>
        <ons-list-item>
            <ons-row align="center">
                <ons-col>
                    <div>
                        <span>合計</span>
                    </div>
                </ons-col>
                <ons-col>
                    <span>{{summary}}</span>
                </ons-col>
            </ons-row>
        </ons-list-item>
    </ons-list>
</div>

$scope.$watchでリストの変更を監視させるのがミソですね。