Question

我只是开始潜入angular.js并且发现了这个我似乎无法绕过的问题。考虑一下这个简单的代码：

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

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

vanilla 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时会发生这种情况以及如何解决这个问题？

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

Answer 1

value属性仅在呈现初始HTML时使用。页面加载后，其他所有内容都发生在Angular Event Loop中，因此您需要执行事件循环可以执行的操作。您可以使用ng-change来查找您要执行的操作：

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

Answer 2

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

最简单的解决方案是在两个字段中使用ng-model

<div ng-app>
    Angular.js:<br>
    <input type="text" ng-model="test">
    <input type="text" ng-model="test">
</div>

演示：Fiddle

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

2 个答案: