AngularJS将特定数据绑定到模板

Question

我正在从Knockout切换到Angular。我现在面临的主要问题是将原始模板转移到Angular会识别的内容。

具体来说，这里有一些我无法转移的代码：

<!-- ko template: { name: 'SquareTempl', data: Squares[5] } --><!-- /ko -->

在Knockout中，这会将Squares [5]附加到SquareTempl，这样当模板被渲染时，它就会使用Squares [5]中的成员（或任何附加的数据）。

我需要重复Squares [0] ~Squares [11]的过程。我不能使用ng-repeat，因为我不会按数字顺序迭代它们。

理想情况下，如果我能按照

的方式做点什么就好了

<td class="Square" id="five" ng-include src="'SquareTempl.html'" ng-data="Squares[5]">

有什么想法吗？

这是一个JSFiddle我写的是为了概述我尝试过使用ng-model的失败尝试。

http://jsfiddle.net/fZz3W/9/

Answer 1

两件事：首先，您可以通过自己实现ng-data来使其成为可用YourApp.directive("ngData", function() {})其次，您是否需要将HTML作为另一个文件的一部分？在Angular中实现所需内容的简单方法是ng-repeat，如：

<td ng-repeat="item in Square">
    <div>{{item.name}}</div> 
</td>

更新Square数组时，会另外发布一个帖子。

查看修改过的JSFiddle：http://jsfiddle.net/TdWMF/1/

所以这主要是实现你想要的东西，直到我能为你提供更好的解决方案：

使用混合订单ng-repeat进行第二次更新：http://jsfiddle.net/TdWMF/3/

基本上：

<div ng-repeat="index in [4, 2, 0, 3, 1]">
   square index: {{index}}<br />
   square: {{Squares[index]}}
</div>

我知道，非常丑陋，非理想。我还建议在函数中执行order数组生成，然后执行：ng-repeat="index in displayOrder(Squares)"