Angularjs:使用不同的html标签重复ng-repeat

Sté*_*uca 2 angularjs angularjs-ng-repeat

假设有一个控制器中定义的多种数据类型的列表,如下所示:

$scope.list = [
    {text: "Remember BASIC?"},
    {code: "10   a = a+1"},
    // many additional lines…
];
Run Code Online (Sandbox Code Playgroud)

我们希望根据每种类型在视图中进行插值,如下所示:

<p>Remember BASIC?</p>
<code>10   a = a+1</code>
Run Code Online (Sandbox Code Playgroud)

你会怎么做?

[编辑]澄清要获得什么

List是任意类型的任意数量的"段落"的描述.这是一个更广泛的列表:

$scope.list = [
    {text: "Remember BASIC?"},
    {code: "10   a = a+1"},
    {text: "Bla bla"},
    {text: "Bla bla"},
    {text: "Bla bla"},
    {text: "Bla bla"},
    {text: "Bla bla"},
    {text: "Bla bla"},
    {code: "20   b = a+1"},
    {code: "30   c = b+1"},
    {text: "Bla bla"},
    // many additional lines…
];
Run Code Online (Sandbox Code Playgroud)

并且预期的结果是:

<p>Remember BASIC?</p>
<code>10   a = a+1</code>
<p>Bla bla</p>
<p>Bla bla</p>
<p>Bla bla</p>
<p>Bla bla</p>
<p>Bla bla</p>
<p>Bla bla</p>
<code>20   b = a+1</code>
<code>30   c = b+1</code>
Run Code Online (Sandbox Code Playgroud)

等等

拥有一个引人入胜的标签并不是一个问题,但我不希望每个"段落"都有一个引人入胜的标签.

syl*_*ter 5

我不是100%肯定你是什么意思

//许多额外的线......

但如果你的清单看起来像

$scope.list = [   

       {text: "Remember BASIC?"},
       {code: "10   a = a+1"},
       {text: "Remember Loundy?"},
       {code: "10   a = a+3"}  
   ....
  ];
Run Code Online (Sandbox Code Playgroud)

您可以使用 ng-repeat-start /end

请看这里http://jsbin.com/zawige/3/edit

  <p ng-repeat-start="i in list" ng-if="i.text">{{i.text}}</p>
  <code ng-repeat-end ng-if="i.code">{{i.code}}</code>
Run Code Online (Sandbox Code Playgroud)