1

我才刚刚开始深入研究 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/

4

2 回答 2

2

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

<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">
于 2013-05-10T09:52:13.090 回答
0

发生这种情况是因为{{value}}没有创建绑定，而是用于插值。

最简单的解决方案是在这两个领域都使用 ng-model

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

演示：小提琴

于 2013-05-10T08:25:01.550 回答