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，我将一个表达式 - ＆gt; {{expression}}添加到具有JS或角度的div。我不是很难将表达式编码到每个div中，因为每个div也是动态创建的。但是，我正在添加额外的表达式，即来自前一个div的3个表达式，并添加一个表达式，使得四个。见下面的例子。

<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

你可以在每个开关盒中重复。例如

<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>

Answer 2

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

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

然后在你的模板中做@paulgoblin建议的内容 }

Answer 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>

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

3 个答案: