将 ng-repeat 与包含模板一起使用

Question

我有一个简单的 JSON 数据要在 ng-repeat 中迭代，但我遇到了问题。当我遍历数据时，angular 重复数据而没有重复 div 的 HTML 但我只想要内部 HTML.

例如：

数据

 ...

 $scope.tests = [{text:'text1'},{text:'text2'},{text:'text3'}];

 ...

HTML

<div id="out-div" ng-repeat="test in tests">
  <p>{{test.text}}</p> <b>bold text</b>
</div>

预期的响应应该是这样的：

<p>text1</p> <b>bold text</b>
<p>text2</p> <b>bold text</b>
<p>text3</p> <b>bold text</b>

我只想要里面的HTML，可以吗？

Answer 1

我认为您想在 ng-repeat 中引用可迭代测试的 test 属性而不是 text 像这样：

<div id="out-div" ng-repeat="test in tests">
    <p>{{test.test}}</p>
</div>

Answer 2

我认为你应该这样做，如果你只是想让 p 标签重复：

<div id="out-div">
  <div ng-repeat="t in tests">
  <p>{{t.text}}</p>
  <b>bold text</b>
  </div>
</div>

Answer 3

ngRepeat 重复从当前 div 和 "inside" 到内部 HTML 的所有内容。您无法更改该行为，但您可以创建自己的指令并实现任何您想要的。

知道这一点后，您可以构建模板以适当地使用适当的 id 和 class 标记来解决它。

<div id="out-div">
    <p ng-repeat="test in tests">
        {{test.test}}
    </p>
</div>

Answer 4

使用这个：

<body ng-app="app" ng-controller="testCtrl">
      <div ng-repeat="test in tests">
          &lt;p&gt;{{test.test}}&lt;/p&gt;
      </div>
</body>

Answer 5

你应该把 ng-repeat 放在 <p> 而不是父级 <div> 中，如下所示：

<div id="out-div">
    <p ng-repeat-start="test in tests">{{test.text}}</p>
    <b ng-repeat-end>bold text</b>
</div>

这将仅重复 <p> 和 <b> 标签，而不重复父标签 <div>。

Answer 6

你可以使用 span 来实现这个

<span ng-repeat="test in tests">
<p >{{test.test}}</p> <b>bold text</b>
</span>

不会影响你的造型

Use ng-repeat with Include Template