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?
Related
I am developing a hybrid application by using Ionic Framework. However, my application failed in double binding when user back to hybrid application. The application able to retrieve Array Object from localstorage but my ngrepeats failed to load the var I assigned from localstorage. The following is my code.
controller.js
.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = channel_list;
}])
HTML File
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try calling a function on page load that re initialize your list something like this,
Controller.js
$scope.init = function(){
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
}
$scope.init();
And make sure when ever you visit this page this function is fired.
Note: if you are on the same page and wants to rebind the list then call this function in your goBack() or goForward() function where ever required.
Hope this solves your problem.
JS
var channel_list = [];
channel_list = localStorage.getItem("channel_list");
$scope.chats = JSON.parse(channel_list);
HTML file
<ion-view cache-view="false" view-title="DRDM Chat">
<div class="bar bar-header bar-calm">
<div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
<br><br>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
<img ng-src="data:image/png;base64,{{chat.profilePicture}}">
<h2>{{chat.displayName}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
ng-click="chatRoom(chat.displayName,chat.channelID) Pass value like this.
I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients
<ion-list ng-repeat="x in names">
<a class="item item-icon-left " >
<i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
{{x.Marque}}
</a>
<div ng-show="collapsed">
<table>
<thead >
<td>
<label> Code: </label> {{x.CodeClient}} <br/>
<label> Nom: </label> {{x.NomClient}} <br/>
<a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
Enregistrer
</a>
...
app.js
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
modifClient.html
<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >
<ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">
<div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......
You have to use the framework's href: ngHref or ng-click
<a class="button button-info" ng-href="/modifClient"> ...
LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.
So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).
If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.
Your code would be :
<a class="button button-info" ui-sref="modifClient">
Edit:
If you want to pass an object param in the ui-sref you can do it like this:
<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">
And change your state settings to include a params object:
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
Note:
Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.
You can read How to pass parameters using ui-sref in ui-router to controller for further options.
Edit 2:
After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.CodeClient = null;
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
And in your HTML just use:
<div class="item item-divider center-text"> {{CodeClient}} </div>
Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.
Thanks for every one,This is the solution I found:
change the code of the button:
<a class="button button-info" ng-href="#/modifClient/{{x.CodeClient}}" >
Enregistrer </a>
And in app.js, I had to use $state:
app.controller("ConsultClientCtrl", function($scope, $http,$state) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/selectClient.php")
.success(function(data){
$scope.thisX = $state.params.CodeClient;
$scope.names = data;
});
}
});
And changing the state provider to this:
$stateProvider.state('modifClient', {
url: '/modifClient/:CodeClient',
templateUrl: 'templates/modifClient.html',
controller: 'ConsultClientCtrl'
});
I'm building an ionic to do list app.
I'm working on a delete function where you click the delete button and it will delete the list item, but have I'm having problems and can't figure it out.
the delete button shows, but when you click it nothing happens.
HTML:
<ion-view view-title="To-Do">
<ion-content class="padding">
<!-- http://ionicframework.com/docs/components/#bar-inputs -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon placeholder-icon"></i>
<input type="text" ng-model="item.name" placeholder="Enter Task Here">
</label>
<button class="button ion-ios-plus-outline" ng-click="addItem(item)">
</button>
</div>
<ion-list>
<ion-item class="item-remove-animate" ng-repeat="item in items" >
<h3>{{item.name}}</h3>
<ion-option-button class="button-assertive ion-trash-a" ng-click="remove($index)"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Controller:
.controller('ShortTermCtrl', function($scope, Task) {
$scope.data = Task.data;
$scope.items = [];
$scope.item = {};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {name: ""};
};
$scope.removeItem = function(index){
$scope.items.splice(index, 1);
};
})
You use the wrong function name in view. Change it from remove to removeItem:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem($index)"></ion-option-button>
for ng-repeat use
ng-repeat='(index, item) in items'
to keep track of the index of every item, and pass the index to the remove function
ng-click="removeItem({{index}})"
As per your codexample, you commented out the remove(task) function, you need to target the removeItem(index) function in your HTML
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(1)">
Instead of a static index number, provide the items/index itself to a generic function, then delete that array item, like so:
$scope.removeItem = function(items, index){
items.splice(index, 1);
};
Your HTML will look like so:
<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(items, $index)">
The $index is automatically exposed to your ng-repeat scope among other useful properties, you can read more in the docs of ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
I have this issue, work when I opened on web browser but not on my android smartphone.
<ion-list>
<ion-item class="list" >
<a class="item item-thumbnail-left" ng-href="{{x.Adress}}" ng-repeat="x in names|orderBy:'Name'" >
<img ng-src="{{x.Image}}">
<h2>{{x.Name}}</h2>
<p>{{x.Local}}</p>
<p>{{x.Descri}}</p>
</a>
</ion-item>
</ion-list>
.controller('PlaylistsCtrl', function($scope, $http) {
$http.get("patrocinadores.json")
.success(function (response)
{
$scope.names = response;
});
})
Try write Address without interpolation:
For example:
And verify your property name.
Or you can try (not fancy):
<ion-list>
<ion-item class="list" >
<a class="item item-thumbnail-left" ng-click="Open(x.Adress)" ng-repeat="x in names|orderBy:'Name'" >
<img ng-src="{{x.Image}}">
<h2>{{x.Name}}</h2>
<p>{{x.Local}}</p>
<p>{{x.Descri}}</p>
</a>
in your controller:
$scope.Open = function(url){
window.open(url, '_system');
};
Don't forget in your "a" tag you need set target attr to "system" to load or open your link with default system browser instead of embebed ionic view.
I hope this can help you.
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);
}