How to get/set “checked” state on “button-bar” - component from AngularJS ?
<div class="button-bar">
<div class="button-bar__item">
<input type="radio" name="segment-a" checked>
<button class="button-bar__button">Button1</button>
</div>
<div class="button-bar__item">
<input type="radio" name="segment-a">
<button class="button-bar__button">Button2</button>
</div>
</div>When in Monaca Cloud will be available Onsen UI Ver=2.0.0-beta.5 ?
Now there - Onsen UI (Monaca Version) Ver=2.0.0-beta
My problem, attribute: modifier=“material” in tag <ons-tabbar> has no effect.
Also it works with use $templateCache
@Fran-Diox said:
@operun A good way would be to make a small example in Codepen where this happens. Otherwise if you want some help, please describe how your app is structured and add more code to the question.
Small example in Codepen: http://codepen.io/anon/pen/xZYGOZ
P.S. I do not know how to make in Codepen a dedicate HTML file (“home.html” and “map.html”),
and so I used templates ( <ons-template id=“home.html”> ).
My project in Monaca “home.html” and “map.html” - is dedicated files.
@Fran-Diox said:
Probably
#map-canvasis not attached to the DOM by the time you try to find it. Try to find when it is attached and wait for it.
I undestand. but how - “Try to find when it is attached and wait for it”?
After upgrade Onsen UI v1 to v2, stopped working: document.getElementById(“id”)
Small example in Codepen: http://codepen.io/anon/pen/xZYGOZ
index.html:
<body ng-app="app">
<ons-tabbar var="tabbar" ng-controller="MainCtrl">
<ons-tabbar-item
icon="home"
label="Home"
page=home.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="ion-compass"
label="Map"
page="map.html" ></ons-tabbar-item>
</ons-tabbar>
</body>
map.html:
<div ng-controller="MapCtrl">
<div id="map-canvas"></div>
</div>
controllers.js:
app.controller('MapCtrl',['$scope',
function($scope){
var mapContainer = document.getElementById('map-canvas');
console.log(mapContainer);// null
mapContainer.style.width = '200px';// TypeError: mapContainer is null
mapContainer.style.height = '200px';
var mapOptions = {
center: new google.maps.LatLng(50.5, 30.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(mapContainer, mapOptions);
}
]);