I want to change the color item whan my data change. I use this template code:
<ion-view view-title="Evénement" class="content">
<ion-content class="padding">
<ion-list>
<ion-item ng-repeat="myuser in users">
<span>{{myuser.user_name}} </span><a class="button button-icon icon ion-person-add icon_add" ng-click="addContact('{{myuser.id}}')" ng-class="{contact_added : myuser.isContact }"></a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
I use firebase to loading and saving data. So, I use this code for synchronizing data.
ref.child('contact').child(authData.uid).on('child_added', function (snapshot) {
var myUser = snapshot.key();
$scope.users.push(myUser);
});
When I add a contact on firebase, my color icon does not change immediately. I must click and move my mouse on html page to update the color.
How I have to do to refresh instantly my icon when the data change?
Don't use $scope.$apply(), use AngularFire.
Angular apps should not have to manage the digest loop. Firebase directly integrates with Angular with the AngularFire library, which manages data synchronization and the triggering of $digest.
In your case you can create a $firebaseArray to synchronize your changes:
angular.module('app', ['firebase'])
.constant('FirebaseUrl', '<my-firebase-app>')
.service('rootRef', ['FirebaseUrl', Firebase])
.controller('MyCtrl', MyController);
function MyController($scope, rootRef, $firebaseArray) {
var userRef = rootRef.child('contact').child(authData.uid);
$scope.users = $firebaseArray(userRef);
}
The advantage of using AngularFire is two fold. Firstly, you don't have to manage $scope.$apply(). Secondly, you get realtime array synchronization for free.
add $scope.$apply(); after $scope.users.push(myUser); line.
Related
I need to place the ion-refresher inside a component.
I have a list which is identical in look and behavior, my list component should have refresher, infinite-scroll etc in that one component
I try to add ion-refresher to a custom component.
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
but I get this error:
Parse Error: No provider for Content
Did u try?
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>
As mentioned here and in the docs you need to put your refresher inside a <ion-content> tag.
<ion-content>
<ion-refresher (ionRefresh)="refreshList($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>
when we place ion-refresher inside ion-content, it creates extra space
I'm building an ionic app. I have a state where the user can see all of their posts. Each post has many fields, one of which is 'active' - boolean field.
I'm rendering the list by:
<ion-item ng-repeat="post in posts | filter:{active:true}" ng-click="goToPost(post.id)"
class="item item-thumbnail-left">
<some fields here />
</ion-item>
Then the user has an option to deactivate a post.
<ion-option-button class="button-assertive" ng-click="deactivate(post.id, $index)">
DEACTIVATE
</ion-option-button>
This option makes a request to the backend, and also it locally sets the active field of the post into "false". After the deactivation is complete, I can't get the ng-repeat to re-filter the list - since the current post should no longer appear in the list of active posts.
I tried $scope.$apply() and it threw the $digest error... I tried to add ng-change and ng-model, and that didn't work either. I also tried reloading the state completely, but for some reason, I can't get this done.
Can anyone help me? Thanks in advance!
Look at the fiddle
<div ng-app="app" ng-controller="demoController">
<ion-item ng-repeat="post in data | filter:{activated:true}" ng-click="deativate(post.id)">
{{post.col1}} {{post.activated }} {{"click Me"}} </br>
</ion-item>
</div>
var app= angular.module("app",[]);
app.controller('demoController', ['$scope',
function($scope) {
$scope.data = [
{id:1,col1:"abc",activated:true},
{id:2,col1:"abc1",activated:true},
{id:3,col1:"abc2",activated:true},
{id:4,col1:"abc3",activated:true},
{id:5,col1:"abc4",activated:false},
{id:6,col1:"abc5",activated:true},
];
$scope.deativate = function(id){
angular.forEach($scope.data,function(item){
if(item.id === id){
item.activated = false;
}
})
}
}]);
and for your code you can share your code snippet.
I have home page it contains with list of 2 images i have given controller and Html code.every time home page images loading from backend i want to cache the image in local to avoid every time http request and weekly once or 10 days once i want to check from backend if backend image has changed that time i need to update this cache image . i have followed some example but i could not solve this because i am new to this technology some one help me out to move forward
.controller('TestCtrl', [
'$scope', '$http', '$location', '$window', '$ionicLoading',
function($scope, $http, $location, $window, $ionicLoading) {
$scope.find = function() {
$http.get('****').success(function(data, status, headers, config, response) {
$scope.image1 = data[0].Images1;
$scope.image2 = data[1].Images2;
})
}
}
])
<ion-view title="Home" data-ng-controller="TestCtrl" data-ng-init="find()">
<ion-content>
<div class="list card">
<div class="item item-image">
<img src="{{image1}}">
</div>
</div>
<div class="list card">
<div class="item item-image">
<img src="{{image2}}" >
</div>
</div>
</ion-content>
</ion-view >
console i am getting
image1:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store1.png
image2:http://res.cloudinary.com/dl34322/image/upload/q_58/v1437810617/store2.png
Just save them in local storage, then when the app loads up if there aren't any images in local storage (first time getting the app or it got wiped for some reason) fetch the images.
set it like this:
localStorage.setItem("image1", $scope.image1);
fetch it like this:
$scope.image1FromLocalStorage = localStorage.getItem("image1");
Then every 10 days or whatever you want you can fetch new images from the backend and save them to local storage.
If you don't want to implement all the rest yourself (like LRU or cache size limit and so on) you may want to consider a more complete solution Here are 2 options:
Generic Ioinc Cache: https://github.com/Nodonisko/ionic-cache
Another kind of cache which may be more apropriate for images: https://github.com/BenBBear/ionic-cache-src
See this: ionic 2 caching images
Like the title says, I'm trying to assign a list from a $http request and then see that list in a view.
I believe the problem is the view is shown before the data loads, if I understand ionic correctly. And the view is never updated when the variables change.
I'm told resolves are one way of fixing this but I'd prefer for the view to change and then show a loading indicator while it waits for the http request to finish, and then show the list.
Thanks!
Edit: I think I need to add the way I'm loading the data is through ng-init in the html file, which seems wrong too. Is there a better way altogether?
view html file:
<ion-view view-title={{ListName}} ng-init="getList()">
<ion-content ng-controller="ListCtrl">
<ion-list>
<ion-item ng-repeat="item in list"
class="item-thumbnail-left">
{{item.id}}
<img ng-src="{{item.thumbnail}}">
</ion-item>
</ion-list>
</ion-content>
</ion-view>
controller snippet:
.controller('ListCtrl', function($scope){
$scope.list = []
$scope.ListName = ''
$scope.getList = function(){
$scope.ListName = 'list'
$scope.list = [{id: 1, thumbnail:null}, {id: 2, thumbnail:null},{id: 3, thumbnail:null} ,{id: 4, thumbnail:null}]
}
})
the list is actually gotten in a http request that returns a promise but this gives me the same problem. It's something annoyingly basic that I just don't understand about ionic yet
Dinesh answered my question. Putting the ng-controller in the ion-view was all I needed to do!
On same template ionic is unable to get the value in ion-nav-bar directive.
Problem - Whatever the amount I filled in textbox <input type="text" placeholder="70" ng-model="getamt"> in below mentioned code, I am able to get the same value at Getting Amt here: {{getamt}} ie.if I type 56 I am able to get 56 typed like Getting Amt here: 56 BUT I am expecting the same to print at Not updating Amt {{getamt}} but in this case I am not getting any value.
I need to send this value to my previous page..so I am trying to do this stuff.
Let me know how to fix this weird issue with ionic.
<ion-view>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear" ng-click="myGoBack(getamt)">
<i class="icon ion-ios7-arrow-back"></i> Not updating Amt {{getamt}}
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="has-subheader" padding-bottom="true">
<div class="row">
<div class="col col-30">
<input type="text" placeholder="70" ng-model="getamt">
</div>
<div class="col col-30 item">
Getting Amt here: {{getamt}}
</div>
</div>
</ion-content>
</ion-view>
EDIT -
My controller code -
.controller('mystate2Ctrl', function($scope, $stateParams, $localstorage, $rootScope, $ionicHistory) {
console.log("----- mystate2Ctrl -----");
$scope.myGoBack = function(val){
console.log(val);
$ionicHistory.goBack();
};
$rootScope.$on( "$ionicView.leave", function( scopes, states ) {
if( states.stateName == "app.mystate1" ) {
console.log("In Ionic View blah blah code here");
}
});
The problem you're facing has to do with nested scopes and in particular with the way you use your "model".
The scope is not the model.
I would suggest you to watch this video from Miško Hevery where he talks about the problem you're having. At some point he says something like this:
Whenever you have ng-model there’s gotta be a dot in there somewhere.
If you don’t have a dot, you’re doing it wrong.
Anyway, if you want to fix your problem you should define a model in your controller.
The solution is to create one:
.controller('mystate2Ctrl', function($rootScope, $scope, $state) {
$scope.mymodel = { getamt: 0 };
});
Now you can reference your model in your views using the dot and your view should look something like this:
<ion-view view-title="my-app">
<ion-nav-buttons side="right" class="button-clear" ng-click="myGoBack(mymodel.getamt)">
<i class="icon ion-ios7-arrow-back"></i> Not updating Amt {{mymodel.getamt}}
</ion-nav-buttons>
<ion-content class="has-subheader" padding-bottom="true">
<div class="row">
<div class="col col-30">
<input type="text" placeholder="70" ng-model="mymodel.getamt">
</div>
<div class="col col-30 item">
Getting Amt here: {{mymodel.getamt}}
</div>
</div>
</ion-content>
</ion-view>
If you want to see how it works you can check my plunker.
Probably the best approach is the one John Papa suggests in his Angular guidelines.
If you read carefully the controllerAs View Syntax here he states why you should go for this approach:
Why?: It promotes the use of binding to a "dotted" object in the View
(e.g. customer.name instead of name), which is more contextual, easier
to read, and avoids any reference issues that may occur without
"dotting".
Why?: Helps avoid using $parent calls in Views with nested
controllers.
This is a second plunker with the controllerAs sample.
It seems like because, your Getting Amt here: {{getamt}} and Not updating Amt {{getamt}} in two different directives. So make sure they both can access mystate2Ctrl.
And try to define the variable in the controller itself.
.controller('mystate2Ctrl', function($scope, $stateParams, $localstorage, $rootScope, $ionicHistory) {
$scope.getamt = 0;
// your code
})
HTH