AngularJS中的动态数据绑定

我正在开发AngularJS应用程序，遇到了一个问题。我已经使用这个框架有一段时间了，我还没有看到类似的文档或任何示例。我不知道该走哪条路，指令，模块，或者我还没听说过的东西

问题：

基本上，我的应用程序允许用户添加对象，在本例中我们称之为跨度，这些对象具有某些可编辑的属性：高度和相关标签。我想使用一组能够控制span对象所有迭代的输入字段，而不是每个span都有自己的用于高度和标签操作的专用输入字段

因此，我的近似工作代码如下所示：

<span ng-repeat="widget in chart.object">
    <label>{{widget.label}}</label>
    <span id="obj-js" class="obj" style="height:{{widget.amt}}px"></span>
</span>
<button ng-click="addObject()" class="add">ADD</button>

<input type="text" class="builder-input" ng-model="chart.object[0]['label']"/>
<input type="range" class="slider" ng-model="chart.object[0]['amt']"/>

{{widget.label}
添加

上面的代码允许用户添加新对象，但是UI显然是硬编码到数组中的第一个对象

所需功能：

当用户单击某个对象时，它会更新输入的ng模型的值，以绑定到单击的对象。因此，如果单击“object_2”，则输入的ng模型将更新以与object_2的值同步。如果用户单击“object_4”，它会更新输入的ng模型，您就知道了。本质上是智能用户界面

我曾考虑编写一个名为“sync”的指令属性，它可以将ng模型状态推送到绑定的UI。我考虑过完全创建一个名为

的新标记，并在控制器中构造这些标记。我考虑过使用更新输入字段的

ng click=“someFn（）”

。所有这些都是“可能性”，各有利弊，但我认为，在我开始做一些事情或走上错误的道路之前，我会询问社区

---

以前有人这样做过吗（如果有，举例说明）？如果不是，什么是最干净的AngularJS执行此操作的方式？干杯。

我认为您不需要专门针对这种情况使用自定义指令，尽管一旦您的控件更加复杂，这可能会对您的应用程序有所帮助

看看这个可能的解决方案，添加了一些格式：

我认为解决这一问题的最简单方法需要： -在作用域中存储“选定”索引 -将ng单击绑定到每个重复的跨度，并使用它更新索引

从那里，您可以完全按照您的建议执行：根据您的输入更新模型。这种声明性思维方式是我喜欢的——你的应用程序可以按照你逻辑上思考问题的方式运行

在控制器中：

$scope.selectedObjectIndex = null;

$scope.selectObject = function($index) {
    $scope.selectedObjectIndex = $index;
}

在你的谈话中，重复：

<span ng-repeat="widget in chart.object" ng-click="selectObject($index)">

你的意见：

<input type="text" class="builder-input" ng-model="chart.object[selectedObjectIndex]['label']"/>
<input type="range" class="slider" ng-model="chart.object[selectedObjectIndex]['amt']"/>

---

太棒了。这正是我想做的，也是我问这个问题的原因。又短又甜。