使用ng-repeat渲染条件标记

Given this data in my controller :

在我的控制器中给出这些数据：

$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"}
]

An given this ng-repeat in my view:

在我看来，给出了这个ng-repeat：

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

How can I render this HTML ? :

如何呈现此HTML？：

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

I've explored ng-switch but it keeps the parent div. In other words I want to replace the HTML produced by ng-repeat with new markup based on an object attribute.

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

2 个解决方案

#1

You can do it inside a directive using the $compile angular function like shown in this plnkr.

您可以使用$ plangle中的$ compile angular函数在指令内执行此操作。

UPDATE Here is a plnkr that works better

更新这是一个更好的plnkr

Here is the key part:

这是关键部分：

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);
  });
}

Your controller would look like this:

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

function MyController($scope) {

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

From your example, you'd remove the ng-repeat entirely and just use this directive. One change is that you'd pass in the whole $scope.data and dynamically pull out the bits you wanted to use in your html string. But because it's a string, that should be easy to do with simple string concatenation.

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

One final thing - you are probably going to have to put some tags in so you can replace your static content with dynamic data from your array. Kind of like ng-repeat! (but different all the same).

最后一件事 - 你可能不得不放入一些标签，这样你就可以用你阵列中的动态数据替换你的静态内容。有点像ng-repeat！（但不同的都是一样的）。

Finally, you could use interpolate to fill up your html string:

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

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

Where you would get the data for these items from the controller

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

2 个解决方案

#1

更多相关文章

随机推荐