ng-list not refreshed after adding an item in Ionic
Question
I'm creating one of my first Ionic applications, this application is used to keep track of people you owe money to. I've created a page where you can add amounts, after adding an amount an ng-list is shown containing those amounts.
The problem is that, after adding an item to the array (name = amounts) that is used by ng-repeat to populate the list, it will not show that an item has been added until I refresh the page.
The code:
My html page that shows an overview of the amounts:
<ion-view style="" class=" " id="page2" title="Te ontvangen default page">
<ion-pane>
<ion-content class="has-header" padding="true">
<div style="margin-right:-20px;">
<button ng-click="voegtoe()" class=" button button-balanced button-full " style="left:-10px;" id="teOntvangenDefaultPage-button5">Toevoegen</button>
</div>
<ion-list class=" " id="teOntvangenDefaultPage-list1">
<ion-item ng-repeat="amount in amounts">{{amount.naam}} {{amount.bedrag}} {{amount.datum}}
<ion-option-button class="button-assertive"
ng-click="delete(amount)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</ion-view>
My html page for the add amount popup:
<ion-view style="" class=" " id="page5" title="Voeg toe">
<ion-content class="has-header" padding="true">
<form class="list " id="voegToeOntvangenForm" name="voegToeOntvangenForm" ng-controller="voegToeOntvangenCtrl">
<ion-list class=" " id="voegToe-list3">
<label id="voegToeNaam" class="item item-input ">
<span class="input-label">Naam</span>
<input placeholder="Wie?" type="text" ng-model="naam">
</label>
<label id="voegToeBedrag" class="item item-input ">
<span class="input-label">€</span>
<input placeholder="Bedrag" type="number" ng-model="bedrag">
</label>
<label id="voegToeDatum" class="item item-input ">
<span class="input-label">Datum geleend</span>
<input placeholder="Datum geleend" type="date" ng-model="datum">
</label>
</ion-list>
<button ng-click="saveOntvangen()" class=" button button-balanced button-block " id="voegToe-button6">Toevoegen</button>
<button ng-click="cancelOntvangen()" class=" button button-assertive button-block " id="voegToeCancel-button6">Annuleren</button>
</form>
</ion-content>
My app.js file containing all controllers:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
//- the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
var app = angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
app.controller("OntvangenCtrl", function($scope, $location) {
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
amounts = [];
}
else
{
amounts = JSON.parse(window.localStorage.getItem('records'));
}
console.log('ontvangenctrl');
$scope.amounts = amounts;
$scope.voegtoe = function() {
$location.path("/toevoegenontvangen");
}
$scope.delete = function(item){
var searchTerm = item;
var records = JSON.parse(window.localStorage.getItem('records'));
for (var i=records.length-1; i>=0; i--) {
if (angular.toJson(records[i]) === angular.toJson(searchTerm)) {
records.splice(i, 1);
// break; //<-- Uncomment if only the first term has to be removed
}
}
window.localStorage.setItem('records', JSON.stringify(records));
$scope.amounts = records;
}
$scope.deleteall = function(){
var records = JSON.parse(window.localStorage.getItem('records'));
for (var i=records.length-1; i>=0; i--) {
records.splice(i, 1);
}
window.localStorage.setItem('records', JSON.stringify(records));
}
});
app.controller("voegToeOntvangenCtrl", function($scope, $location, $window) {
$scope.saveOntvangen = function() {
//console.log($scope.naam);
//console.log($scope.bedrag);
//console.log($scope.datum);
var amounts;
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
amounts = [];
}
else
{
amounts = JSON.parse(window.localStorage.getItem('records'));
}
var current = new Object();
current.naam = $scope.naam;
current.bedrag = $scope.bedrag;
current.datum = $scope.datum;
amounts.push(current);
console.log(amounts);
window.localStorage.setItem('records', JSON.stringify(amounts));
$scope.amounts = amounts;
$window.location.href = "#/teontvangen/teontvangen";
}
$scope.cancelOntvangen = function() {
$location.path("/teontvangen");
}
});
app.controller("voegToeBetalenCtrl", function($scope, $location) {
});
my routes.js file:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('tabsController.teOntvangenDefaultPage', {
url: '/teontvangen',
views: {
'tab1': {
templateUrl: 'templates/teOntvangenDefaultPage.html',
controller: 'OntvangenCtrl'
}
}
})
.state('tabsController.teBetalenDefaultPage', {
url: '/tebetalen',
views: {
'tab2': {
templateUrl: 'templates/teBetalenDefaultPage.html',
controller: 'teBetalenDefaultPageCtrl'
}
}
})
.state('tabsController', {
url: '/teontvangen',
templateUrl: 'templates/tabsController.html',
abstract:true
})
.state('voegToe', {
url: '/toevoegenontvangen',
templateUrl: 'views/voegToeOntvangen.html',
controller: 'voegToeOntvangenCtrl'
})
.state('voegToe2', {
url: '/toevoegenbetalen',
templateUrl: 'views/voegToeBetalen.html',
controller: 'voegToeBetalenCtrl'
})
$urlRouterProvider.otherwise('/teontvangen/teontvangen')
});
Is there anyone who has an idea why this is happing?
3 answers
solution1
0 2016-07-07 08:32:13
You should use $scope.$apply() or $scope.$applyAsync(); , after your data binding.
Here are the docs on it: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
//- the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
var app = angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
app.controller("OntvangenCtrl", function($scope, $location) {
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
amounts = [];
}
else
{
amounts = JSON.parse(window.localStorage.getItem('records'));
}
console.log('ontvangenctrl');
$scope.amounts = amounts;
$scope.$applyAsync();
$scope.voegtoe = function() {
$location.path("/toevoegenontvangen");
}
$scope.delete = function(item){
var searchTerm = item;
var records = JSON.parse(window.localStorage.getItem('records'));
for (var i=records.length-1; i>=0; i--) {
if (angular.toJson(records[i]) === angular.toJson(searchTerm)) {
records.splice(i, 1);
// break; //<-- Uncomment if only the first term has to be removed
}
}
window.localStorage.setItem('records', JSON.stringify(records));
$scope.amounts = records;
$scope.$applyAsync();
}
$scope.deleteall = function(){
var records = JSON.parse(window.localStorage.getItem('records'));
for (var i=records.length-1; i>=0; i--) {
records.splice(i, 1);
}
window.localStorage.setItem('records', JSON.stringify(records));
}
});
app.controller("voegToeOntvangenCtrl", function($scope, $location, $window) {
$scope.saveOntvangen = function() {
//console.log($scope.naam);
//console.log($scope.bedrag);
//console.log($scope.datum);
var amounts;
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
amounts = [];
}
else
{
amounts = JSON.parse(window.localStorage.getItem('records'));
}
var current = new Object();
current.naam = $scope.naam;
current.bedrag = $scope.bedrag;
current.datum = $scope.datum;
amounts.push(current);
console.log(amounts);
window.localStorage.setItem('records', JSON.stringify(amounts));
$scope.amounts = amounts;
$scope.$applyAsync();
$window.location.href = "#/teontvangen/teontvangen";
}
$scope.cancelOntvangen = function() {
$location.path("/teontvangen");
}
});
app.controller("voegToeBetalenCtrl", function($scope, $location) {
});
solution2
0 2016-07-07 08:58:07
使用$ timeout并添加调用你的函数，它会自动调用$ apply，值也会被刷新。
solution3
0 2017-02-12 16:07:51
In voegToeOntvangenCtrl controller you are using this
var amounts;
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
amounts = [];
}
else
{
amounts = JSON.parse(window.localStorage.getItem('records'));
}
instead of this you should use amounts variable with $scope at everywhere you have used amounts
$scope.amounts=[];
if(JSON.parse(window.localStorage.getItem('records')) == null)
{
$scope.amounts = [];
}
else
{
$scope.amounts = JSON.parse(window.localStorage.getItem('records'));
}
Hope this'll solve your problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ng-list input not updating when adding items to array
split string using ng-list inside ng-repeat
Bootstrap: select/option list doesn't get refreshed after programmatically adding item
ng-list with line break as textarea delimter in AngularJS >1.3
Can ng-list return an array of numbers instead of strings?
Re-select item in <ul> after list is refreshed
How can I get ng-list behavior, but with a slightly different model?
Can I have two-way binding on a textarea using ng-list?
Custom sharepoint 2010 xslt list - Edit item via javascript - Data not refreshed after edit
ng-repeat gets refreshed when an item clicked
Related Tags