i need to use a ionic slide box to show some images in my application. I used ionic slide box it does not seem to work with a ng-repeat.
this is my html part
<ion-view title="Promotions" ng-controller="PromotionsCtrl">
<ion-content class="has-header" scroll="true" padding="true">
<ion-slide-box>
<ion-slide ng-repeat="obj in promotions">
<img ng-src= {{obj.img}}>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
my controller
.controller('PromotionsCtrl', function($scope, $http, $window, $ionicSlideBoxDelegate,$interval) {
$http.get( 'http://******.com/B*****/service2.php?q=promotions', { cache: true})
.then(function(res){
$scope.promotions = res.data['top'];
$ionicSlideBoxDelegate.update();
});
})
You have to use update() if you are using ng-repeat with slideboxes.
See here:
http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/
The newer version .rc4 of ionic updates the slide box on its own. Try updating your Ionic Lib.
This is my sample,the slide works,but when the delegate-handler updated,the parameter of the "does-contunue" can't work,I'm Still looking for a solution...
html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" does-continue="true" auto-play="true" delegate-handle="image-viewer" style="height:30%;">
<ion-slide ng-repeat="slide in slideList">
<div class="box" style="background-image: url('{{slide.url}}');background-size:100% 100%;></div>
</ion-slide-box>
controller:
angular.module("myApp.controllers", ["myApp.services"])
.controller("myController", function ($scope, $ionicSlideBoxDelegate, myService,$timeout) {
$timeout(function(){
var slideList = myService.getSlides();
$scope.slideList = slideList;
$ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
},2000)
})
service:
angular.module("myApp.services", [])
.factory("myService", function () {
return{
getSlides: function () {
var slideList = new Array();
slideList.push("imgs/a.jpg");
slideList.push("imgs/b.jpg");
slideList.push("imgs/c.jpg");
return slideList;
}
}
})
As #Karan said, the update is call by itself. But there is still some problems. As mentioned in the issue, you can disable the slider if the data is not ready. Then everything will be fine.
Related
I want to have and manipulate two sliders in the same page, how can I do it? Can I set some id for each one?
controllers.js
.controller('appCtrl', function($scope, $http, $ionicSlideBoxDelegate, methodsProvider, $ionicPopup) {
methodsProvider.getTemas().then(function(data) {
$scope.temas = data.temas[0].arquivosSinais;
});
$scope.confirm = function(x) {
console.log($ionicSlideBoxDelegate.currentIndex());
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
index.html
<ion-slide-box>
<ion-slide ng-repeat="x in temas" ng-click="playVideo(x.arquivosSinalizacoes,x.id)">
<img ng-src="{{x.imagemPreVisualizacao}}" alt="{{x.nome}}" />
</ion-slide>
</ion-slide-box>
<!-- ---------------------------------------------------------------- -->
<ion-slide-box>
<ion-slide ng-repeat="x in temas">
<p>
{{x.nome}}
</p>
</ion-slide>
</ion-slide-box>
The problem here is that when I use the first slide-box the second one is ignored and I loose it's values. What can I do?
I got it working, from a help of wedgybo .
Here it is:
Problem with 2 ion-slide-box on the same page You need to make use of
the delegate-handle attribute.
<ion-slide-box delegate-handle="slidebox1>
Then you can reference the slide-box like so
$ionicSlideBoxDelegate.$getByHandle('slidebox1').next();
Hi i am new to ionic and angular. onclick of ion-item i need an index and i want to show accordion(collapse and expand). How can i achieve that
<ion-list class="ion-navicon" show-reorder="true"
can-swipe="listCanSwipe">
<ion-item data-ng-repeat="item in items track by $index" data-ng-click="service($index)" class="item-thumbnail-left">
<ion-reorder-button class="ion-navicon"
on-reorder="moveItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
<div class="{{item.name}}"></div>
</ion-item>
</ion-list>
</ion-content>
Below is my controller
var myApp = angular.module('myApp',[]);
myApp.controller('reorderCtrl',
[
'$scope',
function($scope) {
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.service= function(index){
console.log(index)
}
$scope.items = [{name : jai},{name : saurabh},{name : kamesh},{name : vijay},{name : ravi}];
}])
This worked for me, hopefully it'll work for you:
<ion-list show-reorder="true">
<ion-item class="enable-pointer-events" ng-re....otherGloriousStuff>
<ion-list>
I fixed that with this in the css.
.disable-pointer-events{
pointer-events: all;
}
Hope it works for you.
The issue is that the ng-repeat directive has it's own scope. That scope does not have the service method that you have defined.
You can use reorderCtrl as ctrl syntax to import the controller. This would allow you to call the method in that controller using,
reorderCtrl.service()
Please refer this question as well: Ng-click doesn't work inside ng-repeat
I have my controller as "chatnow" and replacing the $scope.iid for title using $stateParams. But the chat messages are updated in a separate variable. I can update the messages at the interface using the following code but title not printed. When i remove the controller name title gets printed and not the messages. Help me out where i am going wrong.?
App.js :
.state('chatnow', {
url: '/chatnow/:jid',
templateUrl: 'templates/chatnow.html',
controller: 'ChatNow'
});
Controller.js
.controller('ChatUserClick', function($rootScope, $scope, $stateParams, $ionicPopup, $state, SendMessage, SharedProperties, ChatMessageService, Profile) {
$scope.iid = $stateParams.jid;
$scope.userJid = $stateParams.jid;
var sharedData = SharedProperties.sharedObject;
var MC = this;
MC.list = ChatMessageService.getList($scope.curchatjid);
})
Chat.html
<ion-view title="{{MC.iid}}" ng-controller="ChatNow as MC">
<ion-content class="chat">
<ion-list>
<li class="item chat-msg-wrap" ng-class="{'msg-send': todo.dt == 'send'}" ng-repeat="todo in MC.list track by $index">
<div class="chat-msg">{{todo.msg}}</div>
</li>
</ion-list>
</ion-content>
</ion-view>
It is because you are using ng-controller with route/ state configuration. Remove the ng-controller from your view. When you use the ng-view directive, don't use the ng-controller along with it. The controller will be specified from the state configuration, in your case:
.state('chatnow', {
url: '/chatnow/:jid',
templateUrl: 'templates/chatnow.html',
controller: 'ChatNow as MC'
});
The answer to this has been mentioned in this: https://stackoverflow.com/a/36881457/3878940
I am working on an Ionic project with the api from the Movie Database. I have this array in an ng-repeat that shows me some images (cast pictures). But not all the images in the array have an actual picture.
Now I am trying to show a default image when the api does not provide an image. My question is how to do this with ng-if i suppose. In my controller I created a scope as followed:
$scope.default_image = '../img/default_poster.png';
Part of my controller:
.controller('MovieDetailCtrl', function($scope, $stateParams, $ionicLoading, MovieService) {
$ionicLoading.show({template: 'Loading ...'});
$scope.init = function(){
MovieService.getCastCrewInfo($stateParams.id).then(function(data){
$scope.casts = MovieService.castMovie;
$scope.default_image = '../img/default_poster.png';
});
$ionicLoading.hide();
}
})
Part of my HTML code:
<div class="content-cast">
<!-- <h3>Cast</h3> -->
<br>
<hscroller>
<ion-scroll direction="x" scrollbar-x="false" >
<hcard ng-repeat="cast in casts" >
<img ng-src="http://image.tmdb.org/t/p/w154/{{cast.profile_path}} || default_image" >
<p class="cast-name">{{cast.name}}</p>
</hcard>
</ion-scroll>
</hscroller>
</div>
Either use a scope function or ng-if
$scope.getImage = function(item){
return item.profile_path ? 'http://image.tmdb.org/t/p/w154/' + item.profile_path : $scope.default_image;
});
View
<img ng-src="{{getImage(cast)}}" >
For ng-if
<img ng-if="cast.profile_path" ng-src="http://image.tmdb.org/t/p/w154/{{cast.profile_path}}">
<img ng-if="!cast.profile_path" ng-src="{{default_image}}">
Does ng-grid provide a right click context menu?
I couldn't find it on http://angular-ui.github.io/ng-grid/
However I do remember there was a comprehensive demo page available few weeks back (July 2014) where row level and even cell level right click context menu was shown.
Unfortunately I don't have that URL now and strangely not able to find this on Google anymore.
Thanks in advance.
Yes, ng-context-menu is the way to go. Just don't put the dropdown code withing rowTemplate as the position would be incorrect. Place it outside of ui-grid. The only issue with this approach is to get the current ui-grid row. I decided to save it to controller scope on context menu opening. My rowTemplate:
<script type="text/ng-template" id="member-list.row.html">
<div ng-click="col.isRowHeader || grid.appScope.selectNode(row.entity)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__selected': row.entity.id===grid.appScope.selectedNodeId }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell style='cursor:pointer' context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="cml_menu"></div>
</script>
Note the context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="cml_menu" part in it. That way I can use contextMenuEntity later wherever needed. Using it in context menu dropdown:
<ul class="menu __context" role="menu" id="cml_menu">
<li class="menu-item" ng-click='blade.showDetailBlade(contextMenuEntity, contextMenuEntity.displayName)'>
<i class="menu-ico fa fa-edit"></i> Manage
</li>
<li class="menu-item" ng-click='delete(contextMenuEntity)'>
<i class="menu-ico fa fa-trash-o"></i> Delete
</li>
</ul>
to get the row
html:
<div id="grid1" ui-grid="vm.gridOptions1" ng-right-button="vm.rightClick($event)" ui-grid-pagination ui-grid-move-columns ui-grid-selection class="grid"></div>
js:
angular.module('Context')
.controller('ContextM', ContextM)
.directive('ngRightButton', ngRightButton );
ContextM.$inject = ['$scope', '$rootScope', '$state', '$timeout'];
ngRightButton.$inject = ['$parse'];
function FoboItemController ($scope, $rootScope, $timeout){
$scope.gridOptions = {data: myData};
$scope.rightClick = function (event) {
var scope = angular.element(event.toElement).scope()
console.log('you clicked on row: ', scope.rowRenderIndex);
};
}]);
app.directive('rightClick', function($parse) {
return function(scope, element, attrs) {
var fn = $parse(attrs.rightClick);
element.bind('contextmenu', function(event) {
scope.$apply(function() {
event.preventDefault();
fn(scope, {$event:event});
});
});
};
});
}
})();