Angular 在 ng-click 函数中还原对象值

Question

我有一个任务对象数组，使用 ng-repeat 指令显示在我的视图中。每个对象都有一个名为 "editMode" 的布尔值属性，默认情况下设置为 false。我有一个 ng-click 函数，可以将当前任务的 "editMode" 属性更改为 true。在我看来，我有一些元素 shown/hidden 使用 ng-show 和 editMode 属性。这按预期工作。我有一个在 editMode 为真时显示的保存按钮。 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();
}

Angular 在 ng-click 函数中还原对象值

Angular object value being reverted in ng-click function

javascript

angularjs

angularjs-ng-click