AngularJS帮助绑定表单输入

时间:2013-12-17 04:38:38

标签: javascript angularjs

我是AngularJS / WebDev的新手,一直在寻找解决我面临的问题的最佳方法。

我有任何数据阵列通过ng-options填充表单上的下拉列表。 (以下示例)

 $scope.products = [
   { name: 'ALD', data1: 'ALDdata', data2: 'ALDdata2', data3: 'ALDdata3' },
   { name: 'BLD', data1: 'BLDdata', data2: 'ALDdata2', data3: 'ALDdata3' },
   { name: 'ELD', data1: 'ELDdata', data2: 'ALDdata2', data3: 'ALDdata3' }
  ],

一旦用户选择了一个选项,我将如何将每个属性绑定到各个文本框。

<input type="text" value="{{data1}}" />
<input type="text" value="{{data2}}" />
<input type="text" value="{{data3}}" />

我已经坚持了近4个小时,无休止的谷歌搜索没有相关的结果。我非常感谢你提前帮助。

更新

我找到了一个解决我问题的工作JSFiddle,但是,它正在使用旧版本的AngularJS。有人可以帮我在1.2.2中完成这项工作吗?

http://jsfiddle.net/n7ZCg/3/

2 个答案:

答案 0 :(得分:1)

$scope.products是一系列值,所以你需要ng-repeat,这就像一个foreach 所以尝试以下方式

 <ul>
   <li ng-repeat="product in products"> 
    <input type="text" ng-model="product.data1" />
    <input type="text" ng-model="product.data2" />
    <input type="text" ng-model="product.data3" />
   </li>
 </ul>

或尝试一下,下面的代码显示数组值的第一个索引。

<input type="text" value="{{products[0].data1}}" />
<input type="text" value="{{products[0].data2}}" />
<input type="text" value="{{products[0].data3}}" />

答案 1 :(得分:-1)

您正在寻找ng-model:

http://docs.angularjs.org/api/ng.directive:ngModel

http://docs.angularjs.org/api/ng.directive:input.text

在您的示例中,您需要:

<input type="text" ng-model="data1" />
<input type="text" ng-model="data2" />
<input type="text" ng-model="data3" />

注意缺少牙箍;您正在命名范围成员,而不是将其值替换为适用位置。