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

AngularJS Ng-repeat, create dynamic dom with expressions

本文关键字：创建 动态 dom 表达式 Ng-repeat AngularJS      更新时间：2023-09-26

这是我正在尝试解决的问题。我想创建一个 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 或角度向div 添加一个表达式 ->{{expression}}。我没有将表达式硬编码到每个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>
只要

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

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

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

您可以在每个开关案例中重复 ng。例如。

<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>
您可能

希望使用范围函数执行此操作。

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