我正在构建一个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']"/>
上面的代码将允许用户添加新对象，但UI显然是硬编码到数组中的第一个对象。
期望的功能：
当用户单击某个对象时，它会更新输入的ng-model的值以绑定到单击的对象。因此，如果单击“object_2”，则输入的ng-model更新以与object_2的值同步。如果用户点击“object_4”它会更新输入的ng-model，你就明白了。智能UI，基本上。
我已经考虑过编写一个名为“sync”的指令属性，它可以将ng-model状态推送到绑定的UI。我想完全创建一个名为的新标签 <object> 并在控制器中构造这些。我考虑过使用 ng-click="someFn()" 更新输入字段。所有这些都是“可能性”，有自己的优点和缺点，但我想在我开始做某事或走错路之前我会问社区。
有人曾经这样做过（如果有的话，例子）？如果没有，那么最简洁的AngularJS方法是什么？干杯。
我认为您不需要专门针对这种情况使用自定义指令 - 尽管在您的控件涉及更多时，这可能对您的应用程序有所帮助。
看看这个可能的解决方案，添加了一些格式：
http://jsfiddle.net/tLfYt/
我认为解决这个问题最简单的方法是：
- 将“选定”索引存储在范围内
- 将ng-click绑定到每个重复的跨度，并使用它来更新索引。
从那里，您可以完全按照您的建议进行操作：在输入上更新模型。这种声明性思维方式是我喜欢Angular的方式 - 你的应用程序可以像你在逻辑上思考问题一样流动。
在你的控制器中：
$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']"/>
我认为您不需要专门针对这种情况使用自定义指令 - 尽管在您的控件涉及更多时，这可能对您的应用程序有所帮助。
看看这个可能的解决方案，添加了一些格式：
http://jsfiddle.net/tLfYt/
我认为解决这个问题最简单的方法是：
- 将“选定”索引存储在范围内
- 将ng-click绑定到每个重复的跨度，并使用它来更新索引。
从那里，您可以完全按照您的建议进行操作：在输入上更新模型。这种声明性思维方式是我喜欢Angular的方式 - 你的应用程序可以像你在逻辑上思考问题一样流动。
在你的控制器中：
$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']"/>