Using:
angularjs 1.5.3
ui-bootstrap 1.3.2
This is my template:
<div id="content" class="center">
<div id="title">
<uib-carousel active="true" interval="5000" ng-if="slides && slides.length">
<uib-slide ng-repeat="slide in slides track by slide.name">
<img ng-src="{{ slide.image }}" />
<div class="carousel-caption">
<p>{{ slide.description }}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
Somewhere in my code I perform a call (with a working service I used many times) like this:
Index.controller('Index.Main', ['$scope', '$sce', 'MyService', function($scope, $sce, myService) {
$scope.slides = [];
myService.loadStuff($scope, ..., function(){
console.log($scope.slides);
}, function(data, status) {
console.log('Could not retrieve stuff');
}).update();
}]);
Which can be detailed as follows:
MyServices calls $http.get behind the scenes.
An array of slides will be shown by console when there is an http success. Right now this is the case.
An error message will be shown by console when there is an http error. Right not it is NOT the case.
Finally, the images are attached correctly to the dom. I can be sure about this because I can inspect it in my browser. however the carousel height (and contents height) is 0.
What am I missing? How can I fix it?
I actually forgot to correctly specify the index property. If there is no index to match against, then there is no way to tell which image is active. When no image is active, the container has height 0
From uibootstrap doc:
As you can see, you need to declare the height of the carousel in the container div
Related
I am trying to use the ngmaps directive for ionic but it doesnt seem to display anything when i use it. I am trying to create the url with json data, it should be putting latitude and longitude into the map center but nothing shows up, not even the map.
<div id="gmap" ng-controller="mapCtrl">
<div map-data="https://maps.google.com/maps/api/js"
map-data-params="{{googleMapsUrl}}">
<ng-map center="{{office.LatLong}}" zoom="3"></ng-map>
</div>
.controller('mapCtrl', function(NgMap, $scope) {
NgMap.getMap().then(function(map) {
console.log(map.getCenter());
//console.log('markers', map.markers);
//console.log('shapes', map.shapes);
$scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8";
});
})
Here is a working Plunker based on ngmap:
There was a problem with your divs (not closing), here is the right sintax:
<div id="gmap" >
<div map-data="https://maps.google.com/maps/api/js" map-data-params="{{googleMapsUrl}}">
<ng-map center="{{office.LatLong}}" zoom="4"></ng-map>
</div>
</div>
I want a live search: the results are queried from web api and updated as the user types.
The problem is that the list flickers and the "No results" text appears for a fraction of second, even if the list of results stays the same. I guess I need to remove and add items with special code to avoid this, calculating differences between arrays, etc.
Is there a simpler way to avoid this flicker at least, and probably to have possibility to animate the changes?
It looks like this now:
The html part is:
<div class="list-group">
<a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{test.name}}</h4>
{{test.description}}
</a>
</div>
<div ng-show="!tests.length" class="panel panel-danger">
<div class="panel-body">
No tests found.
</div>
<div class="panel-footer">Try a different search or clear the text to view new tests.</div>
</div>
And the controller:
testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch',
function($scope, TestSearch) {
$scope.tests = TestSearch.query();
$scope.$watch('search', function() {
$scope.tests = TestSearch.query({'q':$scope.search});
});
}]);
You should use ng-animate module to get the classes you need for smooth animation. For each ng-repeat item that's moved, added, or removed - angular will add specific classes. Then you can style those classes via CSS or JS so they don’t flicker.
An alternative way of doing what you require is to use the angular-ui bootstrap Typeahead component (check at the bottom of the post). It has a type-ahead-wait property in milliseconds and also a template url for customising it.
<div ng-app>
<div ng-controller="MyController">
<input type="search" ng-model="search" placeholder="Search...">
<button ng-click="fun()">search</button>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
<p>Tips: Try searching for <code>ann</code> or <code>lol</code>
</p>
</div>
</div>
function MyController($scope, $filter) {
$scope.names = [
'Lolita Dipietro',
'Annice Guernsey',
'Gerri Rall',
'Ginette Pinales',
'Lon Rondon',
'Jennine Marcos',
'Roxann Hooser',
'Brendon Loth',
'Ilda Bogdan',
'Jani Fan',
'Grace Soller',
'Everette Costantino',
'Andy Hume',
'Omar Davie',
'Jerrica Hillery',
'Charline Cogar',
'Melda Diorio',
'Rita Abbott',
'Setsuko Minger',
'Aretha Paige'];
$scope.fun = function () {
console.log($scope.search);
$scope.names = $filter('filter')($scope.names, $scope.search);
};
}
I have an ion-slide-box using ng-repeat showing images that are fetched from a remote server.
<ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
<ion-slide ng-repeat="slide in files">
<img ng-src="{{slide.filename}}" >
</ion-slide>
</ion-slide-box>
and the js:
$scope.getFiles = function() {
Files.query({
//some parameters
}).$promise.then(function(data) {
$scope.files = data;
});
When getFiles() is called (which fires a service that is not shown here), $scope.files is updated successfully. But the DOM (the images loaded into the ion-slide-box) are not automatically updated. How do I refresh the DOM?? I have tried timeout (nothing happens) and $scope.$apply (throws error that $dispatch already sterted.)
Even though this is a mobile app, when testing in desktop browser, I can re-size the browser and the images automatically display. So either I figure out how to keep this updated, or find a better image slider/carousel to use.
You need to call the $ionicSlideBoxDelegate.update() method after you have changed the scope variable. The slidebox does not automatically listen for changes in the latest version of the framework.
http://ionicframework.com/docs/nightly/api/service/$ionicSlideBoxDelegate/
You should set a delegate-handle attribute and use that to make sure you don't interfere with any other slideboxes you make have loaded at the time.
html
<ion-slide-box delegate-handle="image-viewer" on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
<ion-slide ng-repeat="slide in files">
<img ng-src="{{slide.filename}}" >
</ion-slide>
</ion-slide-box>
js
$scope.getFiles = function() {
Files.query({
//some parameters
}).$promise.then(function(data) {
$scope.files = data;
$ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
});
}
I believe this will change in the near future so your code will work as expected. They are working on an updated slidebox component but it was pulled at the last minute to speed up the latest release.
You need to wait the ng-repeat is rendered before being able to update() your slidebox, use this directive :
angular.module('starter')
.directive('repeatDone', function () {
return function (scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
})
HTML :
<ion-slide-box>
<ion-slide ng-repeat="day in week" repeat-done="repeatDone()" >
In your controller
$scope.getFiles = function() {
Files.query({
//some parameters
}).$promise.then(function(data) {
$scope.week = data;
});
$scope.repeatDone = function() {
$ionicSlideBoxDelegate.update();
//$ionicSlideBoxDelegate.slide($scope.week.length - 1, 1);
};
To work properly must do the following .
After 8 hours of testing and achieve internet search to find the right solution.
<ion-slide-box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true">
<ion-slide ng-repeat="slide in files">
<img ng-src="{{slide.filename}}" >
</ion-slide>
</ion-slide-box>
delegate-handle="image-viewer" does not have to be in ion-slide-box must be in <ion-content delegate-handle="mainhanddle">
and from the controller must execute these two commands:
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.$getByHandle('mainhanddle').update();
At the end of each call.
To add this here, <ion-slide-box delegate-handle="image-viewer" other important properties such as cancel and for example nr-repeat does not work properly.
Well, I hope I have helped , if you need more details please do not hesitate to contact me.
Instead of:
$scope.files = data;
Try:
$scope.files.splice(0,$scope.files.length);
$scope.files = $scope.files.concat(data);
That should allow you to update the content of the array without losing the initial memory reference.
Note: I am assuming that $scope.files and data are arrays.
I achieved to resolve this trouble using the library ion-image-lazy-load. Try out with this approach:
JS:
.controller('myCtrl', function ($scope) {
$scope.images = imagesArray(); // Get array of objects with image urls
$scope.slider = {
options: {
direction: 'horizontal',
slidesPerView: '1',
grabCursor: true
}
};
});
View:
<ion-content lazy-scroll>
<ion-slide-box style="width:100% !important">
<ion-slide ng-repeat="slide in images">
<img image-lazy-src="{{slide.url}}" lazy-scroll-resize="true" image-lazy-loader="lines" style="width:100%">
</ion-slide>
</ion-slide-box>
</ion-content>
I'm brand new at AngularJS, watching a Lynda.com video series on it, "Up and Running with AngularJS with Ray Villalobos." I can't get past this error notice. I'm using WAMP to display an external Ajax file data.json with an $http service.
I don't understand why my content is not displaying on the screen. All that shows onscreen is the CSS border for the div and the "Photo of" alt text. Nothing in the {{}}'s display. ONce I started using the WAMP server, the content stopped appearing - the server is started, though. Here is the error:
"http://localhost/AngularJS/lib/angular/angular.min.js is being assigned a //# sourceMappingURL, but already has one"
GET http://localhost/AngularJS/images/.jpg
Also, there should be a list of only 4 items, but I'm getting a much longer list than that.
My controllers.js:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.cars = data;
});
}]);
My html:
<div ng-controller = "MyController">
<ul>
<li ng-repeat="item in cars track by $index">
<div class="section">
<h2>{{item.model}}</h2>
<img ng-src="images/{{item.shortname}}.jpg" width="200px" alt="Photo of {{item.model}}" title="Photo of {{item.model}}">
<h3>{{item.description}}</h3>
<p>{{item.edition + ', ' + item.bodytype}}</p>
</div>
</li>
</ul>
</div>
</div>
My problem was in the data.json file. It began with var myApp =. Once I removed that, it worked.
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.