AngularJS是一种用于创建动态Web应用程序的框架。其中一个最有用的指令之一是ng-repeat，它允许您在页面上复制和渲染多个元素。通常情况下，您需要使用HTML元素来将数据绑定到页面上。然而，你可以使用ng-repeat指令来绕过这个限制。
ng-repeat指令
ng-repeat指令是AngularJS中最强大和最灵活的指令之一。它允许您对一个数组进行迭代，并为每个数组项生成一个新元素。例如，以下代码段使用ng-repeat指令来创建一个简单的列表：
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>该指令会遍历名为“items”的作用域属性，并将其值赋给局部变量“item”。从而为列表中的每个元素都创建了一个新的li元素。这是ng-repeat指令的基本用法。但是，您还可以使用其他参数或功能增强该指令。
无需HTML元素
ng-repeat指令通常假设要渲染的元素存在于HTML模板中。但实际上，您不必在模板中放置任何HTML元素。相反，您可以在JavaScript代码中生成任意数量的新元素，并将它们添加到DOM中。
具体来说，您可以使用$compile服务和$rootScope将动态生成的HTML字符串编译为AngularJS模板。然后，您可以使用ng-repeat指令在模板中迭代该数组，并生成新元素。
以下代码段展示了如何使用ng-repeat指令以及其他AngularJS功能来实现此目的：
-- -------------------- ---- ------- --- --- - ----------------------- ---- ------------------------ ---------------- ----------- --------- - --- ---------- - ----- --------------- -- --------- ---- ---------- -- ------- --- ---- ------ ---- -- --------- -------- --- -------- - --------------------------------- -- --- --- -------- -- --- --- ----------------------------------------------------------------------- -- ------ --- ----- ---- --- ---- ------------ - ------ --- ----- --- ----- ---- ---
在这个例子中，我们定义了一个名为“htmlString”的变量，其中包含一个ng-repeat指令和一些静态文本。接下来，我们使用$compile服务将该string编译为AngularJS模板。我们还将$rootScope作为参数传递给$compile服务，因为我们需要确保该模板具有正确的作用域。然后，我们将新的DOM元素附加到页面上的容器元素中。
最后，我们使用$scope将数据绑定到该模板，从而更新显示的内容。在本例中，我们将三个字符串添加到items数组中。这将导致ng-repeat指令生成三个新元素，并将它们添加到DOM中。
指导意义
ng-repeat指令为AngularJS开发人员提供了一种强大的工具，可以轻松地迭代和呈现多个元素。但是，在某些情况下，您可能需要绕过HTML元素的限制，以便更好地控制生成的内容。在这种情况下，您可以使用$compile服务和$rootScope来动态生成模板，并使用ng-repeat指令将其渲染到页面上。
当然，这种技术并不适用于所有情况。在某些情况下，您可能希望使用HTML模板和静态元素，以便使代码更易于阅读和维护。但是，在某些较为复杂的应用程序中，动态生成HTML可能会更加实用，因为它允许您根据
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25161