AngularJS中的动态数据绑定

时间:2013-03-04 00:32:46

标签: angularjs angularjs-directive

我正在构建一个AngularJS应用程序,但我遇到了一个问题。我已经玩了一段时间的框架,我还没有看到像这样或任何例子的文档。我不确定哪条路走下去,指令,模块还是我还没有听说过的......

问题:

基本上我的应用程序允许用户添加对象,我们将说这个示例的跨度,它具有可编辑的特定属性:height和相关标签。我希望使用一组能够控制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方法是什么?欢呼声。

1 个答案:

答案 0 :(得分: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']"/>