I am trying to add a new item to the Ion-List and for some reason it never refresh to update the list:
.controller("HomeController",function($scope,$ionicModal,$state){
$scope.windows = [{id : 1,title:"hello"}];
$scope.addNewWindow = function(window) {
// assign a new id to the window
$scope.windows.push(window);
// close the modal
$scope.closeAddNewWindowModal();
}
I have debugged it and $scope.windows is updated and it does show multiple items But for some reason the ion-list is never updated.
Here is the Index.html code:
<body ng-app="starter" ng-controller="HomeController">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">MI</h1>
<div class="buttons">
<button ng-click="openAddNewWindowModal()" class="button">Add New Window</button>
</div>
</ion-header-bar>
<ion-nav-view class="has-header"></ion-nav-view>
</ion-pane>
</body>
list.html looks like this:
<ion-list>
<ion-item ui-sref="window-details" ng-repeat="window in windows">
{{window.title}}
</ion-item>
</ion-list>
Here is the complete code:
// 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 attribute in index.html)
// the 2nd parameter is an array of 'requiresâ
angular.module(âstarterâ, [âionicâ])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
// Routing
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('list',{
url: '/list',
templateUrl:'templates/list.html',
controller: 'HomeController',
})
.state('window-details',{
url: '/window/:windowId',
templateUrl: 'templates/window-details.html',
controller: 'HomeController'
})
$urlRouterProvider.otherwise('list');
})
// Controllers
.controller(âWindowDetailsControllerâ,function($scope){
})
.controller(âHomeControllerâ,function($scope,$ionicModal,$timeout){
$scope.windows = [{id : 1,title:"hello"}];
$scope.addNewWindow = function(window) {
// assign a new id to the window
$scope.windows.push(window);
// close the modal
$scope.closeAddNewWindowModal();
$timeout(function(){});
}
$scope.openAddNewWindowModal = function() {
$ionicModal.fromTemplateUrl('templates/add-new-window-modal.html',{
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal){
$scope.modal = modal;
// show the modal
$scope.modal.show();
});
// close the modal
$scope.closeAddNewWindowModal = function() {
$scope.modal.hide();
}
}
})