AngularJS中的动态数据绑定

我正在构建一个AngularJS应用程序，并且遇到了问题。我一直在玩这个框架一段时间，我还没有看到像这样或任何例子的文档。我不知道去哪个路径下，指令，模块或东西，我还没有听说过的又...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']"/>

上面的代码将让用户添加新的对象，但用户界面显然是硬编码到阵列中的第一个对象。

期望的功能：

当用户点击的对象上它更新输入的NG-模型的值绑定到对象点击。所以如果点击“object_2”，输入的ng模型会更新以与object_2的值同步。如果用户点击“object_4”，它会更新输入的ng模型，您就会明白。智能UI，本质上。

我想过编写一个名为“sync”的指令属性，可以将ng-model状态推送到绑定的UI。我想完全创建一个名为<object>的新标签并在控制器中构建这些标签。我想过使用ng-click="someFn()"更新输入字段。所有这些都是“可能性”，都有自己的优点和缺点，但是我之前想过要么转出一些东西，要么走错路，我会问社区。

有没有人做过这个（如果是这样，例子）？如果没有，那么最干净的AngularJS的方式是什么？干杯。

来源

2013-03-04 Swordfish0321

我不认为你需要专门为这种情况使用自定义指令 - 尽管这可能会有助于你的应用程序，一旦你的控件更加涉及。

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

我认为解决这个最简单的方法要求： - 商店“选择”的范围指数 - 绑定NG-点击到每个重复的跨度，并使用它来更新索引。

从那里，你可以完全按照你的建议：更新输入模型。这种声明式思维方式是我喜欢Angular的 - 我的应用程序可以按照您逻辑思考问题的方式流动。

在你的控制器：

$scope.selectedObjectIndex = null; 

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

在您的NG-重复：

<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-04 01:15:07

真棒。这正是我想要做的，正是我问这个问题的原因。简短而甜美。 – Swordfish0321 2013-03-04 01:22:13

AngularJS中的动态数据绑定

回答

相关问题