Issues in accessing ng-model while using ion-list options-buttons in Todo Tutorial

tutorials
1

Hi I am new to AngularJS and Ionic. I have successfully completed the todo app tutorial and trying to implement edit task function using ion-list options-buttons like,

<ion-list option-buttons="taskButtons">
     <ion-item ng-repeat="task in activeProject.tasks" 
        item="task">
        {{ task.title }}
      </ion-item>
 </ion-list>

$scope.taskButtons = [
	    {
	      text: 'Delete',
	      type: 'button-assertive',
	      onTap: function(task) {
		        $scope.deleteTask(task);
	      }
	    },
	    {
		      text: 'Edit',
		      type: 'button-calm',
		      onTap: function(task) {
		        alert('Edit Item: ' + task.title);
		        $scope.editTask(task);
			  }
    	}
	    ];

Now I am having issues assigning task.title to ng-model in my template.

$scope.editTask = function(task) {								     
 $scope.edittask.title = task.title;
 $scope.editTaskModal.show();     
}

I am getting this error,

TypeError: Cannot set property 'title' of undefined
    at Scope.$scope.editTask 
    at Object.$scope.taskButtons.onTap

what i am doing wrong or how to assign the selected task title to the ng-model so user can edit the task. kindly help me on this.

2

You have a method called $scope.editTask. Then you have are trying to set a property on an object called $scope.edittask. Pretty confusing.

However, the problem is that you haven’t defined the object $scope.edittask so you cannot see the property title on an object that does not exist.

$scope.edittask = {};  // You must instantiate an object first.

$scope.editTask = function() {
  $scope.edittask.title = task.title;
  $scope.editTaskModal.show();
};
3

Hi Calendee,

It was my bad, I haven’t instantiate the object. Thanks for your help. It works now.

Now I have another issue like, after the successful edit and save the task, I would like to close the options-buttons ( Edit and Delete ) from the view. Currently the buttons stays on the screen, I need to swipe again to get the list view.

So how to remove the Edit option-buttons from the ion-item ?

Thanks in advance.

4

See this : List swipe buttons

Right now, I don’t think there is an answer.

5

Thanks for the update. Hope soon there will be a solution for this problem.