将ng-repeat与Include模板一起使用
[英]Use ng-repeat with Include Template
问题描述
I have a simple JSON data to iterate in ng-repeat but I am having a problem. 
我有一个简单的JSON数据要在ng-repeat进行迭代，但是我遇到了问题。 When I iterate through the data, angular repeats the data without HTML of the repeat's div but I just want the inner HTML. 当我遍历数据时，angular重复数据而没有重复div的HTML，但是我只想要内部HTML。
For example: 例如：
Data 数据
...
$scope.tests = [{text:'text1'},{text:'text2'},{text:'text3'}];
...
HTML 的HTML
<div id="out-div" ng-repeat="test in tests">
<p>{{test.text}}</p> <b>bold text</b>
</div>
The expected response should be like this: 预期的响应应该是这样的：
<p>text1</p> <b>bold text</b>
<p>text2</p> <b>bold text</b>
<p>text3</p> <b>bold text</b>
I just want the inner HTML, is it possible? 我只想要内部HTML，可以吗？
6 个解决方案
解决方案1
1 已采纳 2015-12-11 09:47:13
You should put ng-repeat in <p> instead of parent <div> like below: 您应该将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>
This will repeat only <p> and <b> tags and not parent <div> . 这将仅重复<p>和<b>标记，而不重复父<div> 。
解决方案2
0 2015-12-11 09:25:56
I think you wanted to refer to the test property of the test iterable in your ng-repeat instead of text like this: 我认为您想在ng-repeat中引用可迭代测试的测试属性，而不是像这样的文本 ：
<div id="out-div" ng-repeat="test in tests">
<p>{{test.test}}</p>
</div>
解决方案3
0 2015-12-11 09:27:57
I think you should do something like this, If you just want p tag to repeat: 我认为您应该执行以下操作，如果您只想重复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 Codepen： http ：//codepen.io/anon/pen/obXREK
解决方案4
0 2015-12-11 09:28:37
ngRepeat repeats everything from current div and "inside" to the inner HTML. ngRepeat重复从当前div和“ inside”到内部HTML的所有内容。 You cannot change that behavior, though you can create your own directive and implement whatever you want. 尽管可以创建自己的指令并实现所需的任何内容，但是您无法更改该行为。
Knowing that, you can build your template to address it with proper id and class tags appropriately. 知道了这一点，您可以构建模板以适当地使用适当的id和class标签对其进行寻址。
<div id="out-div">
<p ng-repeat="test in tests">
{{test.test}}
</p>
</div>
解决方案5
0 2015-12-11 09:36:48
use this : 用这个 ：
<body ng-app="app" ng-controller="testCtrl">
<div ng-repeat="test in tests">
<p>{{test.test}}</p>
</div>
</body>
解决方案6
0 2015-12-11 09:49:14
you can use span to acheive this 你可以用跨度来达到这个目的
<span ng-repeat="test in tests">
<p >{{test.test}}</p> <b>bold text</b>
</span>
it wont affect your styling 它不会影响您的造型
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.