angularjs - AngularJS 中的动态数据绑定(bind)

Question

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

问题:

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

所以我的大约。工作代码是这样的:

<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 值以绑定(bind)到单击的对象。因此，如果单击“object_2”，输入的 ng-model 会更新以与 object_2 的值同步。如果用户单击“object_4”，它会更新输入的 ng-model，您就明白了。本质上是智能用户界面。

我考虑过编写一个名为“sync”的指令属性，它可以将 ng-model 状态推送到绑定(bind)的 UI。我考虑过完全创建一个名为 <object> 的新标签并在 Controller 中构建它们。我考虑过使用 ng-click="someFn()"更新输入字段。所有这些都是“可能性”，各有利弊，但我想，在我放弃某件事或走上错误的道路之前，我会询问社区。

以前有人这样做过吗(如果有，请举例)？如果没有，执行此操作最干净的 AngularJS 方法是什么？干杯。

Answer 1

我认为您不需要专门针对这种情况使用自定义指令 - 尽管一旦您的控件更多地参与其中，这可能会对您的应用程序有所帮​​助。

看看这个可能的解决方案，添加了一些格式: http://jsfiddle.net/tLfYt/

我认为解决这个问题最简单的方法需要:- 在范围内存储“选定”索引- 将 ng-click 绑定(bind)到每个重复的跨度，并使用它来更新索引。

从那里，您可以完全按照您的建议进行:根据您的输入更新模型。我喜欢 Angular 的这种声明性思维方式 - 您的应用程序可以按照您逻辑地思考问题的方式进行。

在你的 Controller 中:

$scope.selectedObjectIndex = null;

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

在你的 ng-repeat 中:

<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']"/>