11

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

我考虑过编写一个名为“sync”的指令属性，它可以将 ng-model 状态推送到绑定的 UI。我已经完全创建了一个名为<object>并在控制器中构造它们的新标签。而且我考虑过使用ng-click="someFn()"它来更新输入字段。所有这些都是“可能性”，各有优缺点，但我想在我开始做某事或走错路之前，我会询问社区。

有没有人这样做过（如果有，例子）？如果不是，那么执行此操作的最干净的 AngularJS 方法是什么？干杯。

4

1 回答 1

14

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

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

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

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

在您的控制器中：

$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']"/>
于 2013-03-04T01:15:07.180 回答