在 Angular ngRepeat 中编辑时项目消失

Question

我有一个项目数组，每个项目都显示为 ng-repeat 中的指令，如下所示：

<div ng-repeat="item in ctrl.data | filter:ctrl.query"  class="ubi-box container-fluid">
  <user-item item="item" . . .></user-item>
</div>

如您所见，ng-repeat 上有一个过滤器。在指令中，用户可以编辑表单中的项目，当用户单击其中一个项目时会显示这些项目。

当用户编辑影响过滤器的字段时会出现问题。如果用户使用过滤器 (ctrl.query) 找到了该项目，并且如果编辑后的文本意味着该项目不再与过滤器匹配，则该项目会在用户点击保存或其他任何操作之前突然消失。噗！

最优雅的解决方案是什么？我不想在编辑开始时关闭过滤器，因为这样所有项目都会重新出现。我希望过滤器仍然有效，但我希望正在编辑的项目即使被过滤掉也能继续显示。

我是否在每个项目中设置一个“isOpen”标志，并在过滤器中添加一个“or isOpen”子句？添加这样的标志对我来说总是很笨拙，我什至不确定如何在过滤器语法中做到这一点。

是否向过滤器添加“or isFormVisible”子句？这可能更简洁，但同样，我什至如何在 ngRepeat 过滤器语法中做到这一点？

想法？

提前致谢

约翰

Answer 1

可能有更优雅的解决方案，但我可能会遵循 Angular 文档中的示例。

https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state

开始编辑时，将正在编辑的项目复制到填充编辑控件的新对象（幕后的视图控件仍然是主对象）。保存后，将更新后的对象复制到主对象中，此时主对象将恢复为查看模式，并且会被过滤器隐藏。

类似的东西：

  $scope.edit = function (item){
    $scope.editItem = angular.copy(item);
  }

  $scope.saveTo = function(item){
    for (var i = 0; i < $scope.items.length; i++){
      if ($scope.items[i].id === item.id){
        $scope.items[i] = angular.copy($scope.editItem);
        break;
      }
    }

    $scope.editItem = {};
  }

我将正在编辑的项目中的 ID 与列表中每个项目的 ID 进行比较，以确保一次只能对一个项目进行 ng-if'd。这是一个示例plunk。

---

更新：这是另一个plunk，它使用不同的查询过滤器，您所做的只是在进入编辑模式时设置一个标志到一个id。与之前的类似，但没有主目标代码。如果您已经有编辑模式，这似乎应该很快就能应用。

Answer 2

我建议使用ng-model-options 和$render 选项，这是一个工作示例：http://plnkr.co/edit/IFpXBYeJx1wrbKhhzMZg?p=preview

  <form name="userForm">
    <label>Name:
      <input type="text" name="name" ng-model="name" ng-model-options="{ updateOn: 'click' }" />
    </label>
    <button ng-click="userForm.userName.$render();">Update Now</button>
    <br />
  </form>