输入中的角度值绑定到模型变量

时间:2013-06-10 13:28:03

标签: angularjs ng-repeat angularjs-ng-include

我需要帮助发现代码中的问题。 Angular.js为我绑定了输入 values ng-model ,这不是我想要的。 我有一个角度转发器,带有这样的ng-include:

<div ng-repeat='item in items'>
  <label>{{item.number}}</label>
  <div ng-include='item.template'></div>
</div>

包含的项目模板是一个简单的输入字段,基于item.template。有问题的标签是&lt; textarea&gt;和&lt;输入&gt;对我来说。

即我包括这个:

<input type="text" ng-model="item.number" />

该项目如下:

{
  number: 1
  , template: 'text'
  , text: 'Some text'
  , value: 'Some value'
}

所以当上面的事情呈现时,我得到了

<input type="text" ng-model="item.number" class="ng-scope ng-pristine ng-valid">

但问题是在我的输入字段中,我将项目编号作为,如果我更改了值,我的标签也会被更改。即使我把 value =“”占位符=“blah”,我仍然会遇到这种情况。

我还没有那么远,但我想模型也会用数字更新。

我在那里做错了什么?

2 个答案:

答案 0 :(得分:4)

当使用ng-model时,Angular会在模型和输入元素之间创建双向绑定。对模型的任何更改都会更新input元素(所有绑定的默认行为),并且UI输入元素中所做的任何更改都会更新模型。

要摆脱这种行为,你可以

<input type="text" value='{{item.number}}' class="ng-scope ng-pristine ng-valid">

答案 1 :(得分:1)

显然,{{item.number}}绑定到你的项目对象(双向绑定FTW!:-))。如果您希望在渲染时设置该标签并保持不变,那么在您的控制器中,您应该在每个名为“originalNumber”的项目中创建另一个字段,并将您的标签绑定到该字段。