数据绑定到在角

给定一个数据结构，它包含JavaScript对象的阵列的阵列的特定项目，如何可以结合来自该阵列使用角的输入字段特定条目？数据绑定到在角

的数据结构是这样的：

$scope.data = { 
    name: 'Foo Bar', 
    fields: [ 
     {field: "F1", value: "1F"}, 
     {field: "F2", value: "2F"}, 
     {field: "F3", value: "3F"} 
    ] 
};

的fields阵列包含给定的结构的几个实例，以同时具有field属性和属性value每个条目。

如何将input控件绑定到数组条目的value字段属性与fieldF1？

<input ng-model="???"/>

我知道我可以结合使用ng-repeat所有领域，但是这不是我想要的。上述数据只是一个更大的字段列表的例子，我只想将预定义的字段子集绑定到屏幕上的控件上。子集不是基于数组条目中的属性，而是在页面设计时已知的。

因此，对于上面的例子中，我会尝试F1绑定到页面上的一个输入和F2到另一个。 F3不会被绑定到控件上。

我看到那里的ng-model被使用的函数的例子，但它似乎并没有与角1.1.0工作。

是否有输入字段绑定到特定的阵列进入另一种巧妙的方式？

下面是有一个例子的小提琴，但因为它试图在ng-model属性使用功能不起作用：http://jsfiddle.net/nwinkler/cbnAU/4/

更新

基于下面的建议，这是它应该看起来像：http://jsfiddle.net/nwinkler/cbnAU/7/

来源

2012-12-14 nwinkler

我个人会以字段的方式重新组织数组的一个条目的属性成为该对象的标识符克拉。嗯，这句话听起来很奇怪。我的意思是这样的：

$scope.data = { 
    name: 'F1', 
    fields: { 
     F1: { 
      value: "1F" 
     }, 
     F2: { 
      value: "2F" 
     } 
    } 
};

如果要动态绑定的值，它是一个简单，快捷的方式来实现它。这里是你的小提琴修改，以便它的话。http://jsfiddle.net/RZFm6/

我希望帮助

来源

2012-12-14 14:58:32

是的，将阵列重组为更好的结构也是我的想法。我不确定这是否可行，因为我们从后端服务接收到JSON。我不得不问他们是否改变了结构。 – nwinkler

@nwinkler如果更改底层模型往往反正对你有意义的绑定前一次预处理阵列（控制器内），因为与当前的结构则需要每绑定一个新的模式时间搜索阵列。重组你通过对象循环一次，你就完成了。如果他们为你更换API，它甚至更好:) –

接受此答案，因为我认为这是正确的方式来做到这一点。我们将研究改变数据的格式并像你所描述的那样使用它。 – nwinkler

一种方式做到这一点是简单地将必要的引用添加到的范围，就像这样：

$scope.fieldF1 = fieldValue('F1'); 
$scope.fieldF2 = fieldValue('F2');

，然后使用这些引用：

<input ng-model="fieldF1.value"/> 
<input ng-model="fieldF2.value"/>

小提琴：http://jsfiddle.net/cbnAU/5/

注：我是大ass ng $scope.data是静态的，但如果它恰好是动态的，您可以随时观察其上的变化并重新计算引用...

来源

2012-12-14 15:01:48 bmleite

数据是动态的（从后端服务接收），并且这将包含一个大型油田的名单。你有什么建议的作品，而不是供我们使用情况的切实可行的。 – nwinkler

您可以使用一个对象数组，而不是一串字符串。

HTML：

<div ng-repeat="field in data.fields"> 
    <input ng-model="field.val"/> 
</div>

JS：

$scope.data = { 
    name: 'F1', 
    fields: [ 
     { val: "v1" }, 
     { val: "v2" } 
    ] 
};

我已经更新@ Flek的小提琴这里：http://jsfiddle.net/RZFm6/6/

编辑：对不起刚刚看了你的问题得当，你仍然可以使用阵列：

<label>Bound to F1:</label> 
<input ng-model="data.fields[0].value"/>

虽然也许停下来想一想。是否会有可变数量的字段？或者你在制作预定数量的字段？在前者中使用一个数组，在后者中使用一个对象。

来源

2013-06-01 05:50:40 jpillora

这里值得注意的是，如果你尝试，而不必一个领域[0]位置模型领域[1]，angularJS将它解释为一个地图。这可能与预期数组的Spring控制器冲突。这真的很难错过，因为“场[0]”可以被解释为两个数组POS和地图POS。 –

数据绑定到在角

回答

相关问题