ons-carousel-itemコンポーネントをons-carouselコンポーネントにjsで追加した場合refresh()メソッドを読んでレイアウトを更新する必要があります。
とonsenuiのガイドに記載されているのですが、具体的にどのようにjsに組み込めば良いのかわかりません。
お分かりになる方ご教示ください。
Let’s Build a Weather App using AngularJS and Onsen UI!
を参考に、実例のサンプルを改造してみました。
Addボタンをタップすると、ons-carousel-itemがGRAYから順に追加されます。
この場合、ng-repeatで配列分を回していますが、配列に追加しただけではons-carousel-itemに反映されないため、refresh()を実行してons-carousel-itemを更新します。
setImmediate()は、待機中のタスクがない状態でコールバックする関数で、これを使わないとうまく画面に反映されませんでした。
<!DOCTYPE HTML>
<html la="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("page1Controller", ["$scope", function($scope) {
var colorTable = [
{
style: "background-color: gray;",
name: "GRAY"
},
{
style: "background-color: #085078;",
name: "BLUE"
},
{
style: "background-color: #373B44;",
name: "DARK"
},
{
style: "background-color: #D38312;",
name: "ORANGE"
},
{
style: "background-color: red;",
name: "RED"
},
];
ons.ready(function() {
$scope.colorTable = [];
});
$scope.addColor = function() {
if ($scope.colorTable.length < colorTable.length) {
$scope.colorTable.push(colorTable[$scope.colorTable.length]);
setImmediate(function() {
myCarousel.refresh();
if ($scope.colorTable.length > 1) {
myCarousel.setActiveCarouselItemIndex($scope.colorTable.length);
}
});
}
};
}]);
</script>
<style>
ons-carousel-item {
display: table;
text-align: center;
}
.item-label {
display: table-cell;
vertical-align: middle;
color: white;
line-height: 1;
font-size: 48px;
font-weight: bold;
}
.cover-label {
text-align: center;
position: absolute;
left: 0px;
width: 100%;
bottom: 10px;
color: white;
}
</style>
</head>
<body>
<ons-navigator var="myNavigator">
<ons-page ng-controller="page1Controller">
<ons-toolbar>
<div class="center">Carousel</div>
<div class="right"><ons-toolbar-button ng-click="addColor()">Add</ons-toolbar-button></div>
</ons-toolbar>
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="myCarousel">
<ons-carousel-item style="{{color.style}}" ng-repeat="color in colorTable">
<div class="item-label">{{color.name}}</div>
</ons-carousel-item>
<ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
</ons-carousel>
</ons-page>
</ons-navigator>
</body>
</html>