Dear,
I am learning angularjs and I am using guide to create simple todoList app. I can make it push new task, however, when i use addTask() with sample data, it didn’t push new data as my expected. Please tell me why and how to solve this.
This is my code:
angular.module('todoApp',['ionic'])
.controller('todoCtrl', function($scope, $ionicModal){
$scope.tasks=[
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
$scope.projects=[{title:"Learn angularJS"},{title: "Create some demos"}];
$ionicModal.fromTemplateUrl('new-task.html', function(modal){
$scope.getModal = modal;
},{
scope: $scope,
animation: 'slide-in-up'
});
$scope.createTask = function(){
$scope.getModal.show();
}
$scope.cancelTask = function(){
$scope.getModal.hide();
}
$scope.addTask = function(task){
$scope.tasks.push({
title: task.title
});
$scope.getModal.hide();
task.title='';
};
and in HTML file:
<ion-content>
<label class="item item-input"><input type="text" placeholder="Search your task" ng-model="q"></label>
<ion-list>
<ion-item ng-repeat="task in tasks | q">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
Take a look at this repo I have.
It should help you out 
Thank you, but the first item in the list of projects is overlapped by Project title. I also got this problem when creating a side menu and I don’t know why 
By the way, when I add sample tasks in creating new project function, those tasks are shown now. But I don’t know why my code doesn’t work 
@donhathuy can you post full code on codepen.io
I don’t see problem with your code
Thanks for pointing that out. I forgot to update some code to use the current syntax. It is up to date here.
Thanks very much - this really helped!
Hi, I am new to Ionics and sorry if this is a silly question!
This example helps a lot, however I am struggling to understand how it works.
What is the “Projects factory” and how is .factory('Projects… storing my data i.e. Json ?
Please just point me at a tutorial and I will learn 
Thanks!
Eamon.
So lets look at the factory
.factory('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if (projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects'] = angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject'] = index;
}
}
})
Save is the one that we should pay attention to. It lets you pass in data (as project
), change it to json, and save it to local storage.
Now lets look at the function we can call in the controller.
var createProject = function(projectTitle) {
var newProject = Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length - 1);
}
So calling Projects.save($scope.projects);
says, the data I want to pass back to the factory is $scope.projects
, and I want to call the Projects.save
method.
As we stated above, this will json-ify that data, and write it to local storage.
Let me know if this is something you would want to see me indepth
Hi,
Thanks for the quick reply. That’s perfect for now. I’ll keep going with the tutorials and check back in if I get stuck.
Thanks!
Eamon.
1 Like
Hi,
I can now understand what is going on here, however where is the project data stored?!
I need to get a grip on the local storage idea, I don’t fully understand it, sorry.
I want to be able to read from a JSON file stored on a server from my Ionic app. How can I do this? Can you help?
Thanks,
Eamon.
Its all getting stored in your browser local storage
Take a read into local storage here
http://diveintohtml5.info/storage.html