AngularJS ng-repeat绑定input元素的值

最新推荐文章于 2024-01-28 05:15:00 发布

原创最新推荐文章于 2024-01-28 05:15:00 发布 · 2.6k 阅读

CC 4.0 BY-SA版权

文章标签：

3 篇文章

订阅专栏

本文深入探讨了AngularJS中ng-model指令实现的数据双向绑定机制，通过实例展示了如何使用ng-repeat循环输出HTML，并将input元素与数据模型绑定。当input值变化时，数据模型也实时更新，反之亦然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用repeat循环输出指定的HTML，绑定input元素。

ng-bind在使用赋值表达式生成数据模型的同时，还绑定变量到元素的innerHTML中；

ng-value在使用赋值表达式生成数据模型的同时，还绑定变量到元素的value属性中；

ng-model有点特殊，专用于表单元素，即只能用于表单元素，用于其它元素无效.
它实现了数据的双向绑定，不但可以绑定变量到元素的value属性中，还可以绑定表单元素的输入值到数据模型（变量）中去。

使用ng-model进行对数据进行绑定。

<div ng-repeat="item in items">
    <input type="text" autocomplete="off" ng-model="item.value" class="form-control btn-set"/>
</div>

$scope.items={
	item0:{
		id:0,
		value:123
	},
	item1:{
		id:1,
		value:1234
	},
	item2:{
		id:2,
		value:12345
	},
}

这样当改变你input里面的值时，$scope.items中相应item的value也会发生改变，反之亦然。