Question

在我的控制器中提供此数据：

$scope.data = [
    {id: "1", ElementType: "paragraph", text: "some content"},
    {id: "2", ElementType: "listItem", text: "some list item content"},
    {id: "3", ElementType: "quote", text: "some quote"}
]

在我的观点中给出了这个ng-repeat：

<div ng-repeat="item in data">{{item.text}}</div>

如何呈现此HTML？：

<p>Some content</p>
<ul>
    <li>some list item content</li>
</ul>
<blockquote>some quote</blockquote>

我已经探索过ng-switch但它保留了父div。换句话说，我想用基于对象属性的新标记替换ng-repeat生成的HTML。

Answer 1

在ng-if中嵌套<div ng-repeat=...>。

对于else，您可以ng-if使用反转条件

Answer 2

您可以使用$compile角度函数在指令中执行此操作，如this plnkr中所示。

<强>更新 Here is a plnkr that works better

以下是关键部分：

link: function (scope, ele, attrs) {
  scope.$watch(attrs.dynamic, function(html) {

    var htmlStr = '';
    var repeat = attrs.repeat;
    for(var i = 0; i< repeat; i++){
      htmlStr += html;
    }

    ele.html(htmlStr);
    $compile(ele.contents())(scope);
  });
}

你的控制器看起来像这样：

function MyController($scope) {

$scope.html = '<p>{{id}}</p>\
              <ul>\
               <li>{{ElementType}}</li>\
              </ul>\
             <blockquote>{{text}}</blockquote>';
}

从您的示例中，您完全删除ng-repeat并使用此指令。一个变化是您传递整个$ scope.data并动态提取您想要在html字符串中使用的位。但是因为它是一个字符串，所以使用简单的字符串连接应该很容易。

最后一件事 - 您可能需要添加一些标记，以便用阵列中的动态数据替换静态内容。有点像ng-repeat！（但不同的都是一样的）。

最后，您可以使用interpolate来填充您的html字符串：

$interpolate(template)({
  id: id,
  ElementType: ElementType,
  text: text
});

从控制器获取这些项目的数据

使用ng-repeat渲染条件标记

2 个答案: