将ng-repeat与Include模板一起使用

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放在<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 2

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

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

Answer 3

我认为您应该执行以下操作，如果您只想重复p标签：

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

Codepen： http ：//codepen.io/anon/pen/obXREK

Answer 4

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

知道了这一点，您可以构建模板以适当地使用适当的id和class标签对其进行寻址。

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

Answer 5

用这个：

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

Answer 6

你可以用跨度来达到这个目的

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

它不会影响您的造型