Ng在外部点击时重复删除和编辑图标可见性问题

Question

在ng repeat中，我有一个项目列表，每个项目我都有一个编辑和删除图标，如下所示，

项目1(编辑((删除(项目2(编辑((删除(项目3(编辑((删除(项目4(编辑((删除(

当用户单击"编辑"时，我将内容可编辑属性更改为true，并隐藏"编辑"one_answers"删除"选项。

但当用户点击下一个编辑按钮或点击外部时，我需要再次显示编辑和删除选项。

Answer 1

使用ng-blur检测元素何时失去焦点

Answer 2

只需将"项目"的状态存储在项目模型中。我相信，yout项只是json对象的数组。

所以你可以做一些类似的事情：

var vm = this;
vm.items = [...];
vm.onEdit = function(itemToEdit){
    vm.items.forEach(function(item){
       item.isEdit = item == itemToEdit;
    });
}

从某种角度来看：

<div ng-repeat="item in $ctrl.items">
    <span>{{item.title}}</span>
    <span ng-click="$ctrl.onEdit(item)"
          ng-show="item.isEdit">Edit</span>
    <span>Delete</span>
</div>

关于click outside部分。你应该使用ng-blur，正如@Leo提到的，或者

$document.on('click', function(){
    vm.onEdit();
}); 

但是！它将在任何单击时激发，因此您应该在每次可编辑字段单击时附加e.preventDefault()。方法取决于情况。CCD_ 5较好。