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

【问题标题】：AngularJS Ng-repeat, create dynamic dom with expressionsAngularJS Ng-repeat，用表达式创建动态 dom
【发布时间】：2016-01-29 16:52:14
【问题描述】：

这是我正在尝试解决的问题。我想创建一个使用 Angular 动态创建 div 元素的 JS 脚本，同时添加一个额外的表达式，例如 {{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 向 div 添加一个表达式 ->{{expression}}。我没有将表达式硬编码到每个 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>

【问题讨论】：

不太清楚数据模型与预期结果是什么。这些实际上嵌套在模型和输出中吗？
即使您进行了编辑，也不清楚您要完成什么或为什么。至少，你应该展示一些样本数据和你预期的最终输出；现在，您只是展示了一些随机标记并暗示其中的一部分是动态的，而不是如何它们应该是动态的（生成它们的函数）或者它们应该动态变成什么.
为了它的价值，说你想要一些角度代码是“动态的”是更被滥用的陈述之一。如果它是 JS 中的变量和标记中的表达式，它已经是动态的......你不能让它变得任何 more 动态。大多数表明他们希望他们的标记是动态的问题要么是 A：不了解 Angular 是如何工作的，要么是 B：尝试使用 Angular 不知道的其他框架。

标签： javascript angularjs loops dom angularjs-ng-repeat

【解决方案1】：

只要您的数据绑定是动态的，DOM 就会是动态的。我需要更多信息（数据模型、期望）才能更准确，但如果您设置数据并正确绑定它，它应该可以工作。例如，如果您的数据看起来像这样

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

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

【讨论】：

【解决方案2】：

您可以在每个 switch 案例中进行 ng-repeat。例如。

<div ng-switch-when="0">
  <span>{{levelZero}}</span>
</div>
<div ng-switch-when="1">
  <span ng-repeat="expression in levelOne">{{expression}}</span>
</div>
<div ng-switch-when="2">
  <span ng-repeat="expression in levelTwo">{{expression}}</span>
</div>

【讨论】：

【解决方案3】：

您可能希望使用范围函数来执行此操作。

<div ng-switch="assignment.id">
    <div ng-switch-when="1">{{ getExpressions(assignment.id) }}</div>
    <div ng-switch-when="2">{{ getExpressions(assignment.id) }}</div>
</div>

【讨论】：