Angular.js:手动修改后更新绑定

Angular.js: update binding after manual modification

本文关键字：更新 绑定 修改 js Angular      更新时间：2023-09-26

我刚刚开始深入研究angular.js，发现这个问题似乎无法解决。考虑下面的简单代码:

<input type="text" ng-model="test">
<input type="text" value="{{test}}">

当我在第一个字段中写入时，第二个字段更新得很好。当我写入第二个字段，然后返回到第一个字段时，绑定不再更新。有趣的是，HTML属性value 没有更新，只是没有显示。

在普通javascript中等效的(至少大致的)代码没有这个问题:

<input type="text" id="model">
<input type="text" id="binding">
<script>
    var model = document.getElementById("model");
    var binding = document.getElementById("binding");
    model.addEventListener("keyup",function() {
        binding.value = model.value;
    });
</script>

这里有一个小提琴供您测试:http://jsfiddle.net/Q6b5k/

知道为什么在使用angular.js时会发生这种情况以及如何解决这个问题吗?

[EDIT]从最初的回复来看，我似乎没有说清楚。我不希望第二个字段更新第一个字段。绑定只能是单向的，例如允许过滤甚至手动更正(例如在博客文章创建表单中自动创建URL别名)。http://jsfiddle.net/Q6b5k/1/

value属性仅在呈现初始HTML时使用。在页面加载之后，其他的事情都在Angular的事件循环中发生，因此你需要做一些事件循环可以拾取的事情。你可以使用ng-change来做你想做的事情:

<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">

这是因为{{value}}不创建绑定，它用于插值。

最简单的解决方案是在 两个字段中都使用ng-model
<div ng-app>
    Angular.js:<br>
    <input type="text" ng-model="test">
    <input type="text" ng-model="test">
</div>

演示:小提琴

相关文章：