This is the controller for the particular view with which I'm having an issue.
.controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$ionicSlideBoxDelegate',
function($rootScope, $scope, $state, $timeout, $ionicSlideBoxDelegate) {
$scope.state = { detail: false, selected: 0 };
$scope.stateSwitch = function() {
$scope.state.detail = !$scope.state.detail;
$timeout( function() { $ionicSlideBoxDelegate.update(); }, 50);
}
$scope.activateSlide = function($index) {
$ionicSlideBoxDelegate.slide($index);
}
Here is the view.
<ion-view left-buttons="leftButtons">
<ion-content class="has-header" has-tabs="true" ng-show="!state.detail">
<div class="list menu-list">
<a class="item" ng-repeat="item in items" ng-click="stateSwitch();activateSlide($index)">
...
</a>
</div>
</ion-content>
<ion-content class="has-header padding" has-tabs="true" ng-show="state.detail">
<div class="menu-detail">
<ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-repeat="item in items">
...
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Upon clicking the list item, it triggers the state.detail flag which switches the view to a menu item detail page. From the menu item detail page, I'm using ion-slide-box so that users can paginate through the items as well.
This works great when I don't specify which slide index to start on. Even when I do pick a static number to start the slider on, it works. However, when I use the $index of the menu list as an argument to change the active slide on the slide box, the slide box just smashes all the slides together and their is no swipe functionality.
This happens even after I update the slide box.
Is there something wrong with how I am using $index? Or perhaps this was not the intended way to dynamically set the active slide? Any advice would be appreciated!
on your controller in your function $scope.activateSlide use without $ on index
here code that worked for me:
on html:
<h4 ng-repeat="type in view.menu.itens" ng-click="changeSlide($index)"></h4>
on my controller
$scope.changeSlide = function funChangeSlide(index) {
$ionicSlideBoxDelegate.slide(index);
}
Related
I have a series of menu items with submenus and they all have an angle-down icon that it's supposed to flip upwards using a class rotate180. Problem is, I can't isolate the functionality so that it only happens in the menu I am opening and not all of them. ALSO, I need it to stay in the desired position according to the menu being open or closed. By either opening/closing the menu on clicking it or by canceling the icon flip once menu is opened. Hope that makes sense.
Here is my html
<div class="menu-item">
<md-list id="playerTrigger" ng-click="menuIsOpen = 1; changeClass()" layout="row" layout-padding="" class="layout-row" layout-align="center center" flex>
<span class="title flex" flex=""> Players</span>
<span ng-class="class"></span>
</md-list>
<div class="sub-menu" ng-show="menuIsOpen===1" ng-animate="'animate'">
<md-menu-item ng-repeat="item in vm.players">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.linkto}}" class="">
<p flex="">{{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
And the controller
$scope.class = "ti-icon ti-mini right ti-angle-down";
$scope.changeClass = function() {
if ($scope.class === "ti-icon ti-mini right ti-angle-down")
$scope.class = "ti-icon ti-mini right ti-angle-down rotate180";
else
$scope.class = "ti-icon ti-mini right ti-angle-down";
};
Since you only need to toggle rotate180 class, I would keep the static classes in class attribute and the changing one in ng-class:
<span class="ti-icon ti-mini right ti-angle-down" ng-class="{'rotate180': rotate}"></span>
and in the controller:
$scope.rotate = false; //initial value
$scope.changeClass = function() {
$scope.rotate = !$scope.rotate;
}
I'm trying to implement infinite scroll in my app but i'm finding difficulties. currently my json file has 30 records in it and when the page loads up, every data show up on the data. what i want to achieve is on the page load it show only show up 5 of the data ans when the user scrolls to the buttom the infinite scroll takes over and loads another 5 of the data and keep on repeating.
HTML
<ion-content>
<div class="list card has-subheader" ng-repeat="item in feeds track by item.u_pic_id">
<div class="item item-avatar">
<img src="../usr_up_img/{{item.profile_pix}}">
<h2><a class="mylinks" href="#/tab/source/{{item.profile_id}}">{{item.fname}} {{item.lname}}</a></h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="../images/{{item.profile_pix}}">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
{{item.love_total}} Loves
{{item.com_total}} Comments
</p>
</div>
</div>
<ion-infinite-scroll
on-infinite="loadmore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
JS
.controller('feedsctrl',['$scope','$http',function($scope,$http){
$scope.feeds = [];
$scope.loadmore=function() {
var params = {};
if($scope.feeds.length > 0) {
params['after']=$scope.feeds[$scope.feeds.length - 1].profile_id;
}
$http.get('http://localhost/myapp/app_ion/feeds.php').success(function(data){
$scope.feeds=console.log(data) ;
$scope.feeds=data;
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}
}])
any help on how to get this working?
try this
.controller('feedsctrl',['$scope','$http',function($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('http://localhost/myapp/app_ion/feeds.php').success(function(items) {
$scope.items.push(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
}])
This is a example http://codepen.io/elm/pen/Becqp
If you need more help doc
I have simple app with a menu on the left with just two options:
When I click on the "Servicios" option I'm loading some categories from my Parse application:
Then, if I click on the "Tablero" option and then again try to go back to "Servicios" option by clicking on the menu, the data doesn't load:
This is my controller:
.controller('ServicesCtrl', function($scope, $state) {
$scope.categories = {};
// Categories
var Category = Parse.Object.extend("Category");
var query = new Parse.Query(Category);
query.equalTo("isActive", true);
query.ascending("name");
query.find({
success: function(categories) {
$scope.categories = categories;
}
});
})
And this is my view:
<ion-view class="services-view" cache-view="false">
<ion-nav-title>
<span>Servicios</span>
</ion-nav-title>
<ion-content>
<ion-list class="list">
<ion-item ng-repeat="category in categories" class="item item-thumbnail-left">
<img src="img/cut.svg">
<h2>
{{ category.get("name") }}
</h2>
<p>
</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Do I need to do some extra work for loading again?
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
I set up a basic example with Ionic Popover. However, when I open the popover, the opacity stays at zero, preventing the popover from showing. I know the method openPopover is called because I receive the opened console log in my web console. If I remove the opacity property from the console, the popover displays.
My controller..
angular.module('search')
.controller('SearchResultsController', searchResultsController)
searchResultsController.$inject = ['$ionicPopover', '$scope'];
function searchResultsController($ionicPopover, $scope) {
var vm = this;
vm.openPopover = openPopover;
activate();
function activate( ) {
$ionicPopover.fromTemplateUrl('/templates/search/filter-popover.html', {
scope: $scope
}).then(function(popover) {
console.log(popover)
vm.popover = popover;
});
}
function openPopover( $event ) {
console.log("opened")
vm.popover.show($event);
}
}
My view page...
<ion-view hide-nav-bar="true">
<signed-in-header></signed-in-header>
<ion-content class="padding has-header">
<div class="row">
<div class="col col-75 text-left">
<div>4 RESULTS FOR "263355"</div>
</div>
<div class="col col-25 text-right">
<div ng-click="searchResults.openPopover()">
<i class="icon ion-arrow-down-b"></i>
Filter
</div>
</div>
</div>
</ion-content>
<ion-footer-bar>
Ad here 1
</ion-footer-bar>
</ion-view>
My popover template.
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
Why does the popover not show and how can I fix this?
I did some digging in the ionic CSS for popover, and the opacity is set to 0 by default. You can override the opacity to 1 and the popover will display, but I found this: https://github.com/driftyco/ionic/issues/2343. Basically, you have to pass the event ($event) to popover.show() and it will work. The ionic example shows this but the documentation could be more explicit. In your code, change your template to ng-click="searchResults.openPopover($event)".
In my case i just didn't put the popover component in the entryComponent section in my shared module. I didn’t get an error until I restarted the server, don't know why