Question

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

第1项（编辑）（德尔） Item2（编辑）（Del） Item3（编辑）（Del） Item4（编辑）（Del）

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

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

Answer 1

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

Answer 2

只需存储“＆＃39;项目”的状态即可。在项目模型中。我相信，你的项目只是一个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()。方法取决于情况。 ng-blur更好。

外部点击

2 个答案: