データベースへの問い合わせ結果をグローバル変数"CustomerList"に格納し、その内容を"ons-list"の"ons-razy-repeat"で表示するコードを記述しました。
あるボタンを押したときに、データベースの再問合わせを行い、グローバル変数"CustomerList"の中身を丸ごと変更し、それに合わせて"ons-list"の表示内容を変更したく思います。単純に"CustomerList"の中身を変更すると、おかしな表示(表示に時間がかかったり
、リストの高さが長くなったり)になってしまいます。
CustomerListが更新されたときに、一度、リセットをかけなければならないのではないかと思うのですが、マニュアルからはよくわかりませんでした。
どのように処理すれば良いのでしょうか?
var CustomerList=["a","b","c","d","e","f","g","h"];
ons.bootstrap()
.controller('MyCtrl', ['$scope', function($scope) {
$scope.MyDelegate = {
configureItemScope: function(index, itemScope) {
itemScope.item = {
name: 'Item #' + (CustomerList[index])
};
},
calculateItemHeight: function(index) {
return 45;
},
countItems: function() {
return CustomerList.length;
},
destroyItemScope: function(index, scope) {
console.log("Destroyed item #" + index);
}
};
}]);
function ChangeData(){
CustomerList=["あ","い","う","え","お","か"];
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-page ng-controller="MyCtrl">
<ons-toolbar>
<div class="center">Lazy Repeat</div>
</ons-toolbar>
<ons-list>
<ons-list-item ons-lazy-repeat="MyDelegate">
{{item.name}}
</ons-list-item>
</ons-list>
<ons-button onclick="ChangeData();">CustomerList更新</ons-button>
</ons-page>