我有一组任务对象,使用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);
}
}
那是因为它也会因为传播而触发父li
标签的点击。
更改模板以传递事件:
ng-click="vm.saveTask($event, pt)"
然后更改saveTask
以停止传播:
vm.saveTask(event, pt){
pt.editMode = false;
event.stopPropagation();
}