在ng-repeat中使用ng-model满足?

时间:2016-03-30 16:34:55

标签: angularjs contenteditable angular-ngmodel

这是我的问题: 我正在使用ng-repeat制作span的列表。 每个span都有contenteditable属性和ng-model指令。 一切都按预期工作(包括双向数据绑定),直到我尝试将新项目添加到列表中。

<div ng-repeat="item in list">
    <span ng-model="item.text" contenteditable></span>
</div>
<button ng-click="addItemToList"></button>

方法如下:

$scope.addItemToList = function () {
    $scope.list.push({text: 'dummy text'});
}

$scope.addItemToList = function () {
    $scope.list.splice(1, 0, {text: 'dummy text'});
}

将新项目添加到列表(推送或拼接)时,DOM会更新,但最后一项初始化为空,没有任何文本。模型列表中的最后一项也会清空,即使我特意推送了包含文本的元素。

经过几次测试后,我注意到只有在修改后列表的长度更大时才会发生这种情况:  如果我尝试替换/修改/删除(不添加)列表中的元素,它可以正常工作。 我认为这与DOM中contenteditable元素初始化的方式有关(我认为它们初始化为空,不知何故,模型也会清空)。

以前有人遇到过这个问题吗?如果是,您是如何解决的/您找到了哪些解决方法?

2 个答案:

答案 0 :(得分:1)

根据与ngModelController相关的angular docs,似乎没有内置支持与contenteditable元素的双向数据绑定,如在plunkr示例中所示写了自己的contenteditable指令。您可以将其修改版本用作解决方法。

它看起来与此question类似,而contenteditable指令与angular docs示例中的contenteditable指令类似。

我还发现this directive on github可以完成你想要做的事情。


修改:我在上面的评论中发布了新版本的插件: https://plnkr.co/edit/v3elswolP9AgWHDIPwCk

在这个版本中,我添加了一个似乎正常工作的contenteditable指令。它基本上是input[type=text] directive以角度编写的方式的分支,但我拿出了处理不同类型输入的地方(因为在这种情况下它只是文本)以及处理事件的地方那些满足的元素甚至都没有开火。我也对其进行了更改,以便$viewValue根据element.html()而不是element.val()进行更新。您可以使用类似的东西作为解决方法

答案 1 :(得分:0)

这个问题已经过时了,但今天对我来说也是同样的问题。 (角1.5)。我的解决方法是添加模糊更新选项:<td contenteditable data-ng-model="position.value" ng-model-options="{updateOn: 'blur'}"></td>然后模型在初始化时停止变为空。我喜欢在许多地方使用模糊更新(解决一些性能问题)所以这对我有好处,但这是一种诡计。