2016-07-07 44 views
0

我正在創建我的第一個離子應用程序之一,此應用程序用於跟蹤您欠錢的人。我創建了一個可添加金額的頁面,添加金額後,會顯示包含這些金額的ng-list。在離子中添加項目後ng-list不刷新

問題是,在向ng-repeat使用的數組中添加一個項目(名稱=數量)以填充列表後,它將不會顯示該項目已添加,直到我刷新頁面。

代碼:

我的HTML頁面顯示的數額的概述:

<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> 

爲補充量彈出我的HTML頁面:

<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> 

我包含所有控制器的app.js文件:

// 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) { 



}); 

我routes.js文件:

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') 



}); 

是否有任何人誰擁有一個想法,爲什麼這是happing?

+0

使用範圍。$ apply();在$ scope.saveOntvangen函數中,在$ window.location.href =「#/ teontvangen/teontvangen」之後的控制器 – Developer

+0

中; ? –

+0

更新的答案檢查它。 – Developer

回答

0

在數據綁定後,您應該使用$scope.$apply()$scope.$applyAsync();

這裏是文檔就可以了: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) { 



}); 
+0

我以前試過這個,但是我收到這個錯誤:Error:[$ rootScope:inprog] $ apply already already progress –

+0

用$ scope更新了我的答案。$ applyAsync();函數 – Developer

+0

感謝您將時間放在這裏,現在錯誤消失了,但直到我通過按f5手動刷新後仍然無法工作。 –

0

使用$超時,並添加調用你的函數,它會調用$自動應用和值也將刷新。

+0

你能解釋一下爲什麼你會這麼做,以及我需要在代碼中實現它的位置?我是新來的angularjs :)。 –

+0

ng-click =「saveOntvangen()」class =「button button-assertive instead of this use ng-click =」$ timeout(saveOntvangen,500); –

+0

我試過這個,但是這些值在刷​​新之後仍然不顯示。對此有何進一步的想法? –

0

在voegToeOntvangenCtrl控制器您使用此

var amounts; 

    if(JSON.parse(window.localStorage.getItem('records')) == null) 
    { 
     amounts = []; 
    } 
    else 
    { 
     amounts = JSON.parse(window.localStorage.getItem('records')); 
    } 

代替本應使用金額與$ scope變量在任何地方你已經使用的量

$scope.amounts=[]; 

    if(JSON.parse(window.localStorage.getItem('records')) == null) 
    { 
     $scope.amounts = []; 
    } 
    else 
    { 
     $scope.amounts = JSON.parse(window.localStorage.getItem('records')); 
    } 

希望這會解決您的問題