Javascript 在Ionic中添加项目后未刷新ng列表

我正在创建我的第一个Ionic应用程序之一，这个应用程序用于跟踪你欠别人钱的人。我已经创建了一个页面，您可以在其中添加金额，添加金额后，将显示包含这些金额的ng列表

问题是，在向ng repeat用于填充列表的数组（name=amounts）添加项目后，在刷新页面之前，它不会显示已添加项目

守则：

显示金额概述的我的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>

---

有人知道为什么会发生这种情况吗？

您应该使用

$scope.$apply（）

或

$scope.$applyAsync（），在数据绑定之后

下面是上面的文档：

//Ionic Starter应用程序
//angular.module是创建、注册和检索angular模块的全局位置
//“starter”是此角度模块示例的名称（也在index.html中的属性中设置）
//-第二个参数是“requires”的数组
//可以在services.js中找到“starter.services”
//可以在controllers.js中找到“starter.controllers”
var app=angular.module（'app'、['ionic'、'app.controllers'、'app.routes'、'app.services'、'app.directives']）；
应用程序运行（函数（$ionicPlatform）{
$ionicPlatform.ready（函数（）{
//默认情况下隐藏附件栏（删除此选项可在键盘上方显示附件栏）
//表格输入）
if（window.cordova&&window.cordova.plugins&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
插件。键盘。禁用滚动（真）；
}
如果（窗口状态栏）{
//需要org.apache.cordova.statusbar
StatusBar.styleDefault（）；
}
});
})
应用控制器（“OntvangenCtrl”，功能（$scope，$location）{
if（JSON.parse（window.localStorage.getItem（'records'））==null）
{
金额=[]；
}
其他的
{
amounts=JSON.parse（window.localStorage.getItem（'records'）；
}
console.log（'ontvangenctrl'）；
$scope.amounts=金额；
$scope.$applyAsync（）；
$scope.voegtoe=函数（）{
$location.path（“/toevogenentvangen”）；
}
$scope.delete=功能（项）{
var searchTerm=项目；
var records=JSON.parse（window.localStorage.getItem（'records'）；
对于（var i=records.length-1；i>=0；i--）{
if（angular.toJson（记录[i]）==angular.toJson（搜索项））{
记录.拼接（i，1）；
//中断；/=0；i--）{
记录.拼接（i，1）；
}
window.localStorage.setItem（'records'，JSON.stringify（records））；
}
});
应用控制器（“voegToeOntvangenCtrl”，函数（$scope，$location，$window）{
$scope.saveOntvangen=函数（）{
//log（$scope.naam）；
//console.log（$scope.bedrag）；
//控制台日志（$scope.datum）；
风险价值金额；
if（JSON.parse（window.localStorage.getItem（'records'））==null）
{
金额=[]；
}
其他的
{
amounts=JSON.parse（window.localStorage.getItem（'records'）；
}
var current=新对象（）；
current.naam=$scope.naam；
current.bedrag=$scope.bedrag；
current.datum=$scope.datum；
金额。推送（当前）；
控制台日志（金额）；
window.localStorage.setItem（'records'，JSON.stringify（amounts））；
$scope.amounts=金额；
$scope.$applyAsync（）；
$window.location.href=“#/teontvangen/teontvangen”；
}
$scope.cancelOntvangen=函数（）{
$location.path（“/teontvangen”）；
}
});
app.controller（“voegToeBetalenCtrl”，函数（$scope，$location）{
});
数据绑定后，应使用
$scope.$apply（）
或
$scope.$applyAsync（）；

下面是上面的文档：

//Ionic Starter应用程序
//angular.module是创建、注册和检索angular模块的全局位置
//“starter”是此角度模块示例的名称（也在index.html中的属性中设置）
//-第二个参数是“requires”的数组
//可以在services.js中找到“starter.services”
//可以在controllers.js中找到“starter.controllers”
var app=angular.module（'app'、['ionic'、'app.controllers'、'app.routes'、'app.services'、'app.directives']）；
应用程序运行（函数（$ionicPlatform）{
$ionicPlatform.ready（函数（）{
//默认情况下隐藏附件栏（删除此选项可在键盘上方显示附件栏）
//表格输入）
if（window.cordova&&window.cordova.plugins&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
插件。键盘。禁用滚动（真）；
}
如果（窗口状态栏）{
//需要org.apache.cordova.statusbar
StatusBar.styleDefault（）；
}
});
})
应用控制器（“OntvangenCtrl”，功能（$scope，$location）{
if（JSON.parse（window.localStorage.getItem（'records'））==null）
{
金额=[]；
}
其他的
{
amounts=JSON.parse（window.localStorage.getItem（'records'）；
}
console.log（'ontvangenctrl'）；
$scope.amounts=金额；
$scope.$applyAsync（）；
$scope.voegtoe=函数（）{
$location.path（“/toevogenentvangen”）；
}
$scope.delete=功能（项）{
var searchTerm=项目；
var records=JSON.parse（window.localStorage.getItem（'records'）；
对于（var i=records.length-1；i>=0；i--）{
if（angular.toJson（记录[i]）==angular.toJson（搜索项））{
记录.拼接（i，1）；
//中断；/=0；i--）{
记录.拼接（i，1）；
}
window.localStorage.setItem（'records'，JSON.stringify（records））；
}
});
应用控制器（“voegToeOntvangenCtrl”，函数（$scope，$location，$window）{
$scope.saveOntvangen=函数（）{
//log（$scope.naam）；
<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>

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



});

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



});

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



});

var amounts;

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

$scope.amounts=[];

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