Can't push new data into sample data array

tutorials
1

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

Take a look at this repo I have.

It should help you out :smile:

3

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

4

@donhathuy can you post full code on codepen.io

I don’t see problem with your code

5

Thanks for pointing that out. I forgot to update some code to use the current syntax. It is up to date here.

6

Thanks very much - this really helped!

7

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

Thanks!
Eamon.

8

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

9

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
10

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.

11

Its all getting stored in your browser local storage

Take a read into local storage here

http://diveintohtml5.info/storage.html