Angular object value being reverted in ng-click function

Question

I have an array of task objects that are displayed in my view using the ng-repeat directive. Each object has a boolean property called "editMode" that is set to false by default. I have a ng-click function that changes the current task's "editMode" property to true. In my view, I have elements that are shown/hidden using ng-show and the editMode property. This is working as expected. I have a Save button that is displayed when editMode is true. The Save button calls a function that sets the "editMode" property of the current task to false. When I put a debugger in the function, I see the property is changing to false but then it reverts back to true. The relevant portion of my code is listed below:

<ul class="list-group">
    <li ng-repeat="pt in vm.projectTasks" class="list-group-item"
        ng-click="vm.expandTask(pt)">
        <span ng-show="!pt.editMode">{{pt.title}}</span>
        <div ng-show="pt.editMode">
            <label class="control-label">Task Name</label>    
            <input class="form-control" ng-model="pt.title" type="text"/>
            <label class="control-label">Hours</label>    
            <input class="form-control" type="number" ng-model="pt.hours"/>
            <button type="button" ng-click="vm.saveTask(pt)">Save</button>    
        </div>

        <span ng-show="!pt.editMode" class="pull-right"></span>
            <button class="btn btn-danger" ng-click="vm.deleteTask(pt)">
                <i class="fa fa-trash" aria-hidden="true"></i>
            </button>
        </span>

    </li>
</ul>

 .controller('newProjectCtrl',function($uibModalInstance){
    var vm = this;
    vm.existingClient = true;
    vm.projectTeamMembers;
    vm.projectTasks =[
        {title:'Design', hours:0, editMode:false},
        {title:'Development', hours:0, editMode:false},
        {title:'UAT', hours:0, editMode:false}
    ];
    vm.expandTask = function(pt){
        pt.editMode = true;
    }

    vm.saveTask = function(pt){
      pt.editMode = false;
    }

    vm.deleteTask = function(pt){
        var i = vm.projectTasks.indexOf(pt);
        if(i != -1){
            vm.projectTasks.splice(i,1);
        }
    }

user184994 · Accepted Answer · 2017-12-17 18:18:56Z

1

That's because it's also triggering the click of the parent li tag, due to propagation.

Change the template to also pass the event:

ng-click="vm.saveTask($event, pt)"

And then change saveTask to stop propagation:

vm.saveTask(event, pt){
  pt.editMode = false;
  event.stopPropagation();
}

answered Dec 17, 2017 at 18:18

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular object value being reverted in ng-click function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related