Angular $scope not updating in Ionic Framework - angularjs

I have a ng-repeat list, that has a button that changes the state of the item, when I click the button I run the following:
$scope.fav = function(item) {
var i = $scope.news.indexOf(item);
console.log('index', i);
console.log('$scope.news[i].fav', $scope.news[i].fav);
console.log('$scope.news[i]', $scope.news[i]);
if ($scope.news[i].fav === 0) {
console.log('is 0');
$scope.news[i].fav = 1;
} else {
console.log('its not 0');
$scope.news[i].fav = 0;
}
};
It finds the object without a problem, but
$scope.news[i].fav = 1;
or
$scope.news[i].fav = 0;
Never changes the final value. (Keeps returning 0)
Already tried adding $scope.$apply(); with no avail..
MARKUP:
<ion-list class="list item-text-wrap" can-swipe="true">
<ion-item class="item item-thumbnail-left animated fadeIn" ng-repeat="item in news | filter: {title: sinTildes} | orderBy: '-pubDate'" href="#/feed/{{item.source}}/{{item.link}}/{{item.title}}" ng-click="openNews(item)">
<img class="gm-thumbnail" src="{{item.image}}">
<h2>{{item.title}}</h2>
<div class="gm-bottom-left">
<h4 class="dark">{{item.source}} -
<span am-time-ago="item.pubDate"> </span>
</h4>
</div>
<div class="gm-bottom-right">
<span class="icon ion-ios-eye ng-hide font-medium assertive" ng-show="item.rss"></span>
</div>
<ion-option-button class="button-stable" ng-click="fav(item)">
<span ng-show="item.fav"> <i class="icon ion-ios-star energized animated fadeIn"></i></span>
<span ng-show="!item.fav"> <i class="icon ion-ios-star-outline dark animated fadeIn"></i></span>
</ion-option-button>
</ion-item>
</ion-list>

It is an Ionic issue.
I fixed it using angular.copy like this:
$scope.fav = function(item) {
var i = $scope.news.indexOf(item);
var news = angular.copy($scope.news);
console.log('index', i);
console.log('news[i].fav', news[i].fav);
console.log('news[i]', news[i]);
if (news[i].fav === 0) {
console.log('is 0');
DBnews.fav(news[i].link, 1).then(function() {
news[i].fav = 1;
$scope.news[i] = {};
$scope.news[i] = angular.copy(news[i]);
})
} else {
console.log('its not 0');
DBnews.fav(news[i].link, 0).then(function() {
news[i].fav = 0;
$scope.news[i] = {};
$scope.news[i] = angular.copy(news[i]);
});
}
};

Related

How to work on ng-show for particular index in ng-repeat

HTML:
<div class="displayImgData col-sm-3" ng-repeat="item in profileData" >
<a ng-show="onLoadFav" title="Make as Favourite">
<img class="styleright" src="assets/images/unfavourite.png" ng-if="(item.favourite ==0)" ng-click="favouriteUser(item.userid);">
</a>
<a ng-show="onLoadUnFav" title="Favourite">
<img class="styleright" src="assets/images/favourite.png" ng-if="(item.favourite ==1)" ng-click="unfavouriteUser(item.userid);" >`
</a>`
<a ng-show="newFav" title="Make as Favourite">
<img class="styleright" src="assets/images/unfavourite.png" ng-click="favouriteUser(item.userid);">
</a>
<a ng-show="newUnFav" title="Favourite">
<img class="styleright" src="assets/images/favourite.png" ng-click="unfavouriteUser(item.userid);" >
</a>
</div>
JS:
$scope.onLoad = function(){
$scope.profileData = [{'favourite':0,'userid':1},{'favourite':0,'userid':2},{'favourite':1,'userid':3}]
};
$scope.onLoadFav = false;
$scope.onLoadUnFav = false;
$scope.newFav = false;
$scope.newUnFav = true;
$scope.unfavouriteUser= function(){
UserService.getSocialMedia(json).then(function (res) {
if(res.statuscode == 0){
$scope.onLoadFav = false;
$scope.onLoadUnFav = false;
$scope.newFav = false;
$scope.newUnFav = true;
}
});
};
I have onload()which I call on loading my page, I will make my favourite.png enabled if item.favourite == 1in my $scope.profileData and unfavourite.png enabled if item.favourite == 0. If I want to make a particular record alone unfavourite . I am using unfavourite() and I get response from backend as success . If i call onload() again it will be like reloading entire page again.So I given ng-show = onLoadFav ,onLoadUnFav, newFav, newUnFavrespectively in html to make it icon enabled accordingly., But the problem is , since it in ng-repeat all the icon is becoming enabled or disabled , not the particular one. How to work on ng-show for particular index in ng-repeat
I did not test the code, will do it soon. but you could use an array addressed by userid
<div class="container" ng-app="confusionApp">
<div class="displayImgData col-sm-3" ng-controller="testCtrl" ng-repeat="item in profileData" >
<a ng-show="loadData[item.userid].onLoadFav" title="Make as Favourite">
<img class="styleright" src="assets/images/unfavourite.png" ng-if="(item.favourite ==0)" ng-click="favouriteUser(item.userid);">
</a>
<a ng-show="loadData[item.userid].onLoadUnFav" title="Favourite">
<img class="styleright" src="assets/images/favourite.png" ng-if="(item.favourite ==1)" ng-click="unfavouriteUser(item.userid);" >`
</a>`
<a ng-show="loadData[item.userid].newFav" title="Make as Favourite">
<img class="styleright" src="assets/images/unfavourite.png" ng-click="favouriteUser(item.userid);">
</a>
<a ng-show="loadData[item.userid].newUnFav" title="Favourite">
<img class="styleright" src="assets/images/favourite.png" ng-click="unfavouriteUser(item.userid);" >
</a>
</div>
</div>
And that would be the controller
angular.module('testApp',[])
.controller('testCtrl',['$scope', function($scope) {
$scope.loadData = [];
$scope.onLoad = function(){
$scope.profileData = [{'favourite':0,'userid':1},{'favourite':0,'userid':2},{'favourite':1,'userid':3}];
for (var i=0; i < $scope.profileData.length; i ++ ) {
$scope.loadData[$scope.profileData[i].userid] = {onLoadFav : false, onLoadUnFav : false, newFav: false, newUnFav : true};
}
};
$scope.unfavouriteUser= function(pUserID){
UserService.getSocialMedia(json).then(function (res) {
if(res.statuscode == 0){
$scope.loadData[pUserID].onLoadFav = false;
$scope.loadData[pUserID].onLoadUnFav = false;
$scope.loadData[pUserID].newFav = false;
$scope.loadData[pUserID].newUnFav = true;
}
});
};
$scope.onLoad();
}]);

Add change amount and change the Total in Check Box in Ionic

I created a list in Checkbox, listing products where the user can choose a product. I need add in the product list an option where the user can change the quantity of products selected. How I can do it?
My View:
<ion-view view-title="Bebidas Adicionais" ng-controller="exBebidasCtrl" >
<div class="bar bar-subheader">
<h2 class="title">{{'Sub-Total R$ ' + getTotalSelected()}}</h2>
</div>
<ion-refresher pulling-text="Puxe para atualizar..." on-refresh="doRefresh()"></ion-refresher>
<ion-list class="card list">
<div class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="q" placeholder="Procurar" aria-label="filter bebidasextras" />
</div>
</ion-list>
<ion-list>
<div ng-repeat="bebida in bebidasextras">
<ion-checkbox ng-model="bebida.selected" >
<h2>{{bebida.ad_bebida_titulo}}</h2>
<p>R$ {{bebida.ad_bebida_valor}}</p>
</ion-checkbox>
</div>
</ion-list>
<button class="button button-block button-balanced">
<a ng-click="addToCart(bebida.ad_bebida_titulo,bebida.ad_bebida_valor)" class="button button-assertive button-clear icon ion-android-cart"> Continuar Comprando </a>
</button>
</ion-content>
My Controller:
$scope.bebidasextras = [];
var promise = $http.get('http://nhac.esy.es/api_carrinho/lista_bebida_extra.php?json=restaurantes')
.success(function(retorno) {
console.log(retorno);
$scope.bebidasextras = retorno; // não precisa fazer retorno.data
$scope.user = {
bebidasextras: [$scope.bebidasextras[1]]
};
$scope.checkAll = function() {
$scope.user.bebidasextras = angular.copy($scope.bebidasextras);
};
$scope.uncheckAll = function() {
$scope.user.bebidasextras = [];
};
$scope.checkFirst = function() {
$scope.user.bebidasextras = [];
$scope.user.bebidasextras.push($scope.bebidasextras[0]);
};
$scope.setToNull = function() {
$scope.user.bebidasextras = null;
};
$scope.getTotalSelected = function() {
var total = 0;
for(var i = 0; i < $scope.bebidasextras.length; i++){
var bebida = $scope.bebidasextras[i];
total += bebida.selected ? Number(bebida.ad_bebida_valor) : 0;
}
return total;
}
})
.error(function(erro) {
console.log(erro);
});
You can have an input box having a + and - button. Clicking upon which user can change the quantity of product selected.
If you can share some more details probably I would be able to answer in a better way.

How to use ng-click for multiple + / - operators in same controller - Angularjs

Hi i am new to angularjs. In my shopping cart app i am having three textfield for selecting quantity. All the three where loaded from the server. For each product i have to set different ng-click method to change the quantity. If i click one increment button, all the three quantity is changing. Please help me out
In controller:
$scope.increment = function(id) {
if ($scope.count >= 50) { return; }
var cou = $scope.count++;
//id = id+1;
$scope.total=$scope.price*cou;
$scope.total=$scope.total+35;
};
HTML:
<li ng-repeat="orders in ordersList">
<a href="#"><span class="img"><img class="img-thumbnail" src="images/freslogo.jpg" alt="">
</span><span class="product noproduct clearfix"><span class="name"> <b class="doller"><i class="fa fa-rupee"></i>{{orders.price}}</b></span>{{orders.product_name}}
<span class="price">Order ID # {{orders.id}} </span>
<span class="price">- {{orders.created_date}}</span> </a>
<div id="field1"><b>Qty:</b>
<i id="plus" class="ion-plus-circled" ng-click="increment({{orders.id}});"></i>
<input type="text" id="1" value="{{count}}" class="field">
<i class="ion-minus-circled" ng-click="decrement();"></i>
</div>
</li>
$scope.increment = function(order) {
if (order.count >= 50) { return; }
var cou = ++order.count;
//id = id+1;
order.total = order.price*cou;
order.total = order.total+35;
};
Try this:
$scope.increment = function(orders) {
if (orders.count >= 50) { return; }
var cou = orders.count++;
//id = id+1;
$scope.total=$scope.price*cou;
$scope.total=$scope.total+35;
};
As you are using count for individual order but in controller part you are treating it at the scope level. Try same for decrement

ionic open accordion by default from controller

I have implemented ionic accordion effect using the following code. It was working fine as expected, but i want to open the first accordion by default.
<ion-item class="item-stable"
ng-click="toggleGroup(0)"
ng-class="{active: isGroupShown(0)}">
<i class="icon" ng-class="isGroupShown(0) ? 'ion-minus' : 'ion-plus'"></i>
Permanant Address
</ion-item>
<div class="item-accordion" ng-show="isGroupShown(0)">
---------
</div>
<ion-item class="item-stable"
ng-click="toggleGroup(1)"
ng-class="{active: isGroupShown(1)}">
<i class="icon" ng-class="isGroupShown(1) ? 'ion-minus' : 'ion-plus'"></i>
Temporary Address
</ion-item>
<div class="item-accordion" ng-show="isGroupShown(1)">
---------
</div>
controller
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
Just add this line at the end of the for loop:
$scope.shownGroup = $scope.groups[0];

Angular controller value seeming to revert to original value

After originally setting my controller weddingPrice value a change caused by a function does not seem to change the variable. Its probably a simple error- can anyone help?
When sendWeddingQuoteInfo() is called it seems to send the original weddingPrice, not the one which has been updated when the return journey toggle has been checked.
What should happen is that the wedding price should be set at the start through the local setup function. Then if the return journey toggle is switched to on, the returnJourneyChange() should be fired, changing the global weddingPrice. When the Submit Quote button is pressed this should take the updated weddingPrice and send it to the next page. Currently this does not happen- no idea why.
//wedding.html
<ion-view view-title="Wedding Pax Num" can-swipe-back="true">
<ion-content ng-controller="WeddingPaxCtrl">
<div class="card">
<div class="item centerText" style="background-color: brown;">
<h2>CALCULATE WEDDING</h2>
</div>
</div>
<div class="padding20Top padding20Bottom">
<h2 class="centerText">Select number of Passengers</h2>
<input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
<h6 class="centerText">PASSENGERS</h6>
</div>
<ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
</ion-toggle>
<ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>
<div>
<h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
</div>
</ion-content>
<div class="endOfPageButton">
<a href="#/app/home/tester">
<button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
</a>
</div>
</ion-view>
//controller.js
app.controller('WeddingPaxCtrl', function($scope, $stateParams, PassData, WhichQuote, CostOfMarriage, StoreQuoteData, WeddingData, DataThrow) {
var item = WeddingData.getWeddingDataObject();
$scope.passengerNo = 49;
$scope.returnJourney = { checked: false };
$scope.midnightReturn = { checked: false };
var weddingPrice;
$scope.returnJourney;
$scope.midnightReturn;
setup();
var sendInfo;
function setup() {
console.log("setup called");
weddingPrice = CostOfMarriage.getPrice(item[0], $scope.passengerNo, $scope.returnJourney.checked, $scope.midnightReturn.checked);
}
$scope.returnJourneyChange = function() {
console.log("return j called");
weddingPrice = 1000;
console.log("wedding price is now" + weddingPrice);
}
$scope.midnightReturn = function() {
}
$scope.getCostBreakDown = function() {
}
$scope.sendWeddingQuoteInfo = function() {
// var weddingPrice = $scope.weddingPrice;
console.log("WeddingPrice is " + weddingPrice + weddingPrice);
var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
StoreQuoteData.setQuoteData(sendInfo);
WhichQuote.setInfoLabel("Wedding");
}
})
I think your ng-controller attribute is not at the right place. So the scope of your submit button is different.
I've moved the controller to ion-view element then the click is working as expected.
Please have a look at the demo below or here at jsfiddle.
(I've commented a lot of your code just to make the demo work.)
var app = angular.module('demoApp', ['ionic']);
app.controller('WeddingPaxCtrl', function($scope, $stateParams) { //, WeddingData, DataThrow) {
//var item = WeddingData.getWeddingDataObject();
$scope.passengerNo = 49;
$scope.returnJourney = {
checked: false
};
$scope.midnightReturn = {
checked: false
};
var weddingPrice;
$scope.returnJourney;
$scope.midnightReturn;
setup();
var sendInfo;
function setup() {
console.log("setup called");
weddingPrice = 100; //CostOfMarriage.getPrice(item[0], $scope.passengerNo, $scope.returnJourney.checked, $scope.midnightReturn.checked);
}
$scope.returnJourneyChange = function() {
console.log("return j called");
weddingPrice = 1000;
console.log("wedding price is now" + weddingPrice);
}
$scope.midnightReturn = function() {
}
$scope.getCostBreakDown = function() {
}
$scope.sendWeddingQuoteInfo = function() {
// var weddingPrice = $scope.weddingPrice;
console.log("WeddingPrice is " + weddingPrice + weddingPrice);
//var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
//StoreQuoteData.setQuoteData(sendInfo);
//WhichQuote.setInfoLabel("Wedding");
}
})
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<ion-view ng-app="demoApp" view-title="Wedding Pax Num" can-swipe-back="true" ng-controller="WeddingPaxCtrl">
<ion-content>
<div class="card">
<div class="item centerText" style="background-color: brown;">
<h2>CALCULATE WEDDING</h2>
</div>
</div>
<div class="padding20Top padding20Bottom">
<h2 class="centerText">Select number of Passengers</h2>
<input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
<h6 class="centerText">PASSENGERS</h6>
</div>
<ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
</ion-toggle>
<ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>
<div>
<h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
</div>
</ion-content>
<div class="endOfPageButton">
<!---<a href="#/app/home/tester">-->
<button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
<!--</a>-->
</div>
</ion-view>

Resources