Question

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

$scope.list = [
    {text: "Remember BASIC?"},
    {code: "10   a = a+1"},
    // many additional lines…
];

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

<p>Remember BASIC?</p>
<code>10   a = a+1</code>

你会怎么做？

[edit]澄清要获得的内容

列表是任意数量的＆＃34;段落＃34;任意类型。这是一个更广泛的列表：

$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…
];

预期结果：

<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>

等

拥有一个引人注目的标签并不是一个问题，但我不想为每一个＆＃34;段＃34提供一个引人入胜的标签。

Answer 1

我不是100％确定你是什么意思

//许多额外的行......

但如果您的列表看起来像

$scope.list = [   

       {text: "Remember BASIC?"},
       {code: "10   a = a+1"},
       {text: "Remember Loundy?"},
       {code: "10   a = a+3"}  
   ....
  ];

您可以使用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>

Answer 2

是的，您可以使用加载动态模板的指令来执行此操作：

var myApp = angular.module('myApp',[]);

function getTemplate(type) {
    if(type === 'text') {
        return '<p>{{item.contents}}</p>';
    }
    else if(type === 'code') {
        return '<pre>{{item.contents}}</pre>';
    }

    return '{{item.contents}}';
}

myApp.directive("customListItem", function($compile) {
    return {
        restrict: 'E',
        scope: {
            item: '='
        },
        link: function($scope, $element) {
            $element.html(getTemplate($scope.item.type));
            $compile($element.contents())($scope);
        }
    };
});


function MyCtrl($scope) {
    $scope.list = [
        {type: 'text', contents: "Remember BASIC?"},
        {type: 'code', contents: "10   a = a+1"}
    ];
}

您可以写ng-repeat，以便使用原始的list结构。这里的关键是$element.html，它将正确的模板注入到原始模板中，并$compile解释其中的绑定。请注意，原始custom-list-item元素仍将存在于DOM中。你无法用ng-repeat来消除它。

Here it is in action.

Answer 3

我会像这样改变结构：

{
    content: "Remember BASIC?",
    type: "text",
}

然后你可以做

<div ng-repeat="item in list">
  <div ng-switch="item.type">
    <div ng-switch-when="text"><p>{{item.content}}</p></div>
    <div ng-switch-when="code"><code>{{item.content}}</code></div>

如果你必须/想要坚持现在的结构，你可以嵌套ng-repeat：

<div ng-repeat="item in list">
  <div ng-repeat="(type, text) in item">
     <div ng-switch="type"> ...

Answer 4

更改对象模型：

$scope.list = [
{
    text: "Remember BASIC?",
    code: "10   a = a+1"},
    // many additional lines…
},
{
    text: "Remember Test?",
    code: "10   a = a+4"},
    // many additional lines…
}];

然后在你的模板中：

<div ng-repeat="item in list">
  <p>{{item.text}}</p>
  <code>{{item.code}}</code>
</div>

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

4 个答案: