monaca開発メモ2

配列のバインディング

JavaScriptで以下のように、myListにJSON形式で配列を作成。

var app = angular.module('myApp', ['onsen.directives']);
app.controller('listCtrl',function($scope){
    $scope.myList = [{'id':1,'item':'test1'},{'id':2,'item':'test2'}];
});

HTMLでは、「ng-repeat='value in myList'」で配列をループさせ、valueに1行分のデータが入り、「ng-model='value.item'」でテキストボックスにバインディングしています。

<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 ng-model='value.item' class="text-input">
                    </div>
                </ons-col>
            </ons-row>
        </ons-list-item>
    </ons-list>
</div>

これで、配列のバインディングが可能のようです。
次はリストの合計を出して、テキストの値を変えると、合計も動的に変わるというところをやります。