I have the following code. When the map is loaded it just starts flickering. I've tried both ways of loading Google Maps API v3 but I can't figure out why it won't work. Does anyone have any suggestions?
Video of the flickering map
Plnkr
<div ng-repeat="data in dataArray">
<div ng-click="data.showMap = !data.showMap">
<div>View Map</div>
</div>
<div ng-if="data.showMap" class="item" style="height:300px;">
<ui-gmap-google-map center='data.map_data.center' zoom='data.map_data.zoom'></ui-gmap-google-map>
</div>
</div>
Related
In ion-slide-box ionic
The first time I try to populate a slide-box using ng-repeats the slidebox pager doesn't show when the page is loaded, when trying to debug on chrome (desktop) and open the inspector, the slidebox gets fixed automatically.
Is there a way to force a reload of the slide-box after page load?
HTML Code
<ion-slide ion-slide-tab-label="Work Order Progress" class="form-bg">
<ion-scroll direction="y">
<div ng-if="pieMenuList.length > 0">
<div ui-sref="{{wopc.state}}({filter:'{{wopc.params}}'})" class="chart-color" ng-repeat="wopc in pieMenuList">
<div class="arrow_box" style="color: {{wopc.color}};background-color:currentColor">
<span style="color:#fff;">{{wopc.name}}</span>
<span ng-bind="wopc.count" class="wo-count" style="background-color:{{wopc.color}};"></span>
</div>
</div>
</div>
</ion-scroll>
</ion-slide>
For anyone, who still looking for the solution to this problem
In your controller inject ionSlideBoxDelegate
.controller('MyCtrl', function($scope, $ionSlideBoxDelegate) {
//after populating your data in slide just call
$ionicSlideBoxDelegate.update();
}
I have included the code in http://codepen.io/sajoambattu/pen/MbezNa
I have 3 divs in which each div includes color selection, Memory and call plans. The call plans data is there after every device details(after the table).
All the data are depending on 3 JSONs. The color selection and Memory data is coming from devices JSON and call plans data is coming from callplans JSON. I have another JSON(planMapping) for mapping the device and call plan. All JSON's I have included in the JS file.
My requirement is based on the user selection of color and memory, respective call plans should display. Now the content is displaying, but the problem I'm facing is it's displaying the same content in all three sections(Apple, Samsung and Sony).
Issue Example:
Click iPhone 6s plus tab from the apple section and click on 32GB memory and then click any color, now iPhone 6s plus call plans will display. The problem is the same iPhone 6s plus call plans data is getting displayed in all other sections as well.
Any help would be appreciated.
I have updated your code....
http://codepen.io/anon/pen/dOpdXr
Changes :
HTML:
<div class="planDetails" ng-repeat="data in x.callPlanArr">
and also moved </div> of <div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first"> moved to end of the modified div.
JS:
item.callPlanArr = []; //at line 5770
and
item.callPlanArr.push($scope.callplanList.callplans[x]); //5784
Make following change to meet your requirement:
Shift div with class="callPlans" inside div with class="device_overview"
Here is the modification:-
<div class="device_overview {{x.memory}}-{{x.presales_name.split(' ').join('-').replace('(','').replace(')','')}}" ng-repeat="x in v | orderBy:'memory'" ng-show="$first">
<div class="device_detail">
<p>{{x.presales_vendor}}</p>
<h3>{{x.presales_name}}</h3>
<p>{{result}}</p>
</div>
<div class="color">
<div class="color-name">
<p>Choose color:</p>
<span ng-repeat="data in x.variants" class="{{data.s_code}}-{{x.presales_name.split(' ').join('-')}}" ng-show="$first">{{data.colour}}</span>
</div>
<div class="color-code" ng-repeat="data in x.variants" ng-click="changeImg(((data.s_code+' ')+(x.presales_name)).split(' ').join('-').replace('(','').replace(')',''));showPlan(x,data.s_code); showStock(data.s_code);" style="border-color:{{data.colour_code}};background-color:{{data.colour_code}}">{{data.colour_code}}</div>
</div>
<div class="callPlans" ng-if="device_class == x.device_class">
<div class="planDetails" ng-repeat="data in callPlanArr">
<div class="data">
<p>Data</p>
<h3>{{data.plan.data_allowance}}GB</h3>
</div>
<div class="minute">
<p>Minutes</p>
<h3>{{data.plan.call_allowance}}</h3>
</div>
<div class="text">
<p>Texts</p>
<h3>{{data.plan.text_allowance}}</h3>
</div>
<div class="upfront">
<ul>
<li ng-show="data.upfront != ''"><p>£{{data.upfront}}</p>up front</li>
<li><h2>£{{data.plan.rental}}/mth</h2></li>
</ul>
</div>
</div>
</div>
</div>
and add following line in $scope.showPlan function() of your controller
$scope.device_class = item.device_class;
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I have this simple audio for mediaElement.js which works with normal HTML/Js but does not work with angularjs. The Media player is shown just fine but clicking play button does not work.
<div class="col-md-6">
<div class="alert alert" ng-repeat="media in medias">
<h3>{{media.title}}</h3>
<p>{{media.summary}}</p>
<audio id="{{media.filename}}" src="http://danosongs.com/music/danosongs.com-orb-of-envisage.mp3" type="audio/mp3" controls="controls">
</div>
</div>
<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>
![enter image description here][1]
I found the problem thanks to #Biswanath. I was loading Mediaelement before Angular finished loading the elements. So I had to call it when all elements are loaded. Googling I found the solution here and here is my HTML codes
<div class="alert alert" ng-repeat="media in medias" ng-init="$last ? loadMediaElement() : false">
Then in my controller scope, I register Javascript function which bootstraps MediaElementjs, since ng-repeat is done
$scope.loadMediaElement = function()
{
$('video,audio').mediaelementplayer(/* Options */);
};
So I followed this guide so I could have a nav bar on every page: http://tomaszdziurko.pl/2013/02/twitter-bootstrap-navbar-angularjs-component/
And it was working, until I created a separate controller to populate my bootstrap carousel. The thing is, my ng-repeat works fine, but when it does I can't see my navbar on that page. I can see it just fine on other pages. I believe this is a scoping issue, but I am not sure where.
This is what I have in the main body of this page:
<body>
<reusable-navbar></reusable-navbar>
<!-- Carousel Start -->
<div id="main-carousel" class="carousel slide container" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--Must set this by hand-->
<div class="item active">
<img alt="" src="../Revamp/Images/carousel/1.jpg">
</div>
<!--Repeat through the rest-->
<div ng-controller="carouselPhotoController">
<div class="item" ng-repeat="source in source">
<img alt="" ng-src="{{source.source}}">
</div>
</div>
</div>
</div>
And my controller looks like this:
var carouselPhotoController=angular.module("revampApp", []);
carouselPhotoController.controller("carouselPhotoController", function($scope, $http){
$http.get('../Revamp/Images/carousel/photos.json').success(function(photos){
//Carousel photos
$scope.source = photos;
})
});
And the directive is identical to the one in that walk through, just with a different template. So how to I get it so my nav bar will show up AND I can use ng-repeat?
Make sure you are not recreating the app.
This creates a new app:
var carouselPhotoController=angular.module("revampApp", []);
But this only accesses an app already created (note the absence of the second parameter):
var carouselPhotoController=angular.module("revampApp");
Change the above line and it should work.