javascript - AngularJS Ng-repeat，用表达式创建动态 dom

Question

这是我正在尝试解决的问题。我想创建一个 JS 脚本，使用 Angular 动态创建 div 元素，同时添加额外的表达式，例如 {{levelone}}。

这里是一个示例，展示了如果我知道我有 5 次 Dom 元素迭代，我期望的输出结果。

<div ng-switch-when="0">{{levelZero}}</div>
<div ng-switch-when="1">{{levelOneA}}{{levelOneB}}</div>
<div ng-switch-when="2">{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>
etc.....

正如你所看到的，我每次都添加一个表达式。我只是不知道如何通过重复循环继续添加它们，然后让它们使用 AngularJS 正确编译。我正在尝试使我的 DOM 尽可能动态。

编辑 每次我再循环 1 次时，我都会使用 JS 或 Angular 添加一个表达式 ->{{expression}} 到 div 中。我没有将表达式硬编码到每个 div 中，因为每个 div 也是动态创建的。但是，我添加了额外的表达式，即前一个 div 中的 3 个表达式，并添加了一个表达式，使之成为 4 个。请参阅下面的示例。

<div ng-switch-when="3"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>

下面这个是动态生成的

<div ng-switch-when="4"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}{{THIS EXPRESSION IS GENERATED IN js AND ADDED & COMPILED}}</div>

Answer 1

只要您的数据绑定(bind)是动态的，DOM 就会是动态的。我需要更多信息(数据模型、期望)才能更准确，但如果您设置数据并正确绑定(bind)它，它应该可以工作。例如，如果您的数据如下所示

var data = {
   "levelOne" : {},
   "levelTwo" : { 
       "elements" : ["<span id="firstEl"></span>, ...]
    },
   "levelThree" : {
       "elements" : ["<span id="firstEl"></span>, <span id="secondEl"></span>, ...]       
}

然后在您的模板中执行 @paulgoblin 建议的操作。
}