1. 程式人生 > >AngularJS ng-repeat繫結input元素的值

AngularJS ng-repeat繫結input元素的值

使用repeat迴圈輸出指定的HTML,繫結input元素。

ng-bind

ng-bind在使用賦值表示式生成資料模型的同時,還繫結變數到元素的innerHTML中;

ng-value

ng-value在使用賦值表示式生成資料模型的同時,還繫結變數到元素的value屬性中;

ng-model

ng-model有點特殊,專用於表單元素,即只能用於表單元素,用於其它元素無效.
它實現了資料的雙向繫結,不但可以繫結變數到元素的value屬性中,還可以繫結表單元素的輸入值到資料模型(變數)中去。

使用ng-model進行對資料進行繫結。

HTML程式碼

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

js程式碼

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

這樣當改變你input裡面的值時,$scope.items中相應item的value也會發生改變,反之亦然。