项目的角度ngRepeat

内编辑时消失我有一个项目数组，每个显示为NG-重复内的指令是这样的：项目的角度ngRepeat

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

正如你所看到的，上有NG的过滤器-重复。在指令中，用户可以编辑表单内的项目，以显示用户何时单击其中一个项目。

当用户编辑影响过滤器的字段时会出现问题。如果用户使用过滤器（ctrl.query）找到了该项目，并且编辑的文本表示该项目不再与过滤器匹配，那么在用户点击保存或任何内容之前该项目突然消失。噗！

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

我是否在每个项目中设置了“isOpen”标志，并向筛选器添加了“orOpen”子句？添加这样的标志总是让我觉得很糟糕，我甚至不知道如何在过滤器语法中这样做。

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

想法？

在此先感谢

约翰

来源

2015-11-13 John

可能有更优雅的解决方案在那里，但我可能会遵循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设置的标志。与之前的类似，但没有一个主对象代码。如果你已经有一个编辑模式，这似乎应该是非常快的申请。

来源

2015-11-13 04:51:20

这就是答案我很害怕，因为重写很多代码的工作很多:(我希望只是调整过滤器，也许（现在我更多地阅读）了一个函数，但我担心你可能是对的，我有在我的应用程序的其他地方使用了这种模式，所以我知道它已经足够了，谢谢 – John

@John我给了它另一个旋转 –

我开始致力于实现你的第一个答案，并且它不是很难实现，以我的指令结构的方式进行，它不会比你的第二个答案更困难：只需要几行代码（我已经在使用复制模式复制函数的形式，所以它只是反转它的问题为表格保存，并通过c opy的形式指令。）所以哪一个是更坚实的方法，你认为？那第一个模型拷贝来自文档，所以也许我应该这样做？太感谢了。 – John

我会建议使用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>

来源

2015-11-13 02:55:31

不会updateOn：“点击”只是延迟更新，直到上的东西，用户点击？我不需要updateOn：'提交'？麻烦的是，我的表单有很多实时验证，比如测试有效的电子邮件地址，如果我延迟模型更新，验证不会在正确的时间运行。 – John

我还没有亲自尝试过这个，但我相信你正在寻找form.username。$ error是有错误的，所以如果你的模态已经更新或者没有更新，你可以试试 –

项目的角度ngRepeat

回答

相关问题