在ng-click函数中恢复角度对象值

Question

我有一组任务对象，使用ng-repeat指令在我的视图中显示。每个对象都有一个名为“editMode”的布尔属性，默认情况下设置为false。我有一个ng-click函数，可以将当前任务的“editMode”属性更改为true。在我看来，我有使用ng-show和editMode属性显示/隐藏的元素。这是按预期工作的。我有一个editMode为true时显示的Save按钮。 “保存”按钮调用一个函数，该函数将当前任务的“editMode”属性设置为false。当我在函数中放置一个调试器时，我看到该属性正在变为false但后来又恢复为true。我的代码的相关部分列在下面：

<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);
        }
    }

Answer 1

那是因为它也会因为传播而触发父li标签的点击。

更改模板以传递事件：

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

然后更改saveTask以停止传播：

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