Javascript ng仅重复外部元素

我对angularjs中的ng-repeat有问题，我想实现的是在html中只使用ng-repeat的外部元素，我将在一个示例中介绍我所拥有的以及我想要实现的

我有这样的示例选项卡集：

      <tabset>
        <tab heading="{{tabs[0].title}}" active="tabs[0].active" disabled="tabs[0].disabled">
          <img ng-show="myPhotos" src="{{tabs[0].content}}" alt="FBphoto">
        </tab> 
        <tab heading="{{tabs[1].title}}" active="tabs[1].active" disabled="tabs[1].disabled">
          <a href="{{tabs[1].content}}"></a>
        </tab>
      </tabset>

我想让tabset包含ng个重复元素（以避免视图中的数组索引），但内部包含不同的元素，是否可以在angularjs中顺利实现它

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <img ng-show="myPhotos" src="{{tab.content}}" alt="FBphoto"> <!-- Here I want to have various elements -->
</tab>

---

如果我理解正确，那么这就是您要寻找的：

  <tabset ng-repeat="tabs in tabsetArray">
    <tab heading="{{tabs[0].title}}" active="tabs[0].active" disabled="tabs[0].disabled">
      <img ng-show="myPhotos" src="{{tabs[0].content}}" alt="FBphoto">
    </tab> 
    <tab heading="{{tabs[1].title}}" active="tabs[1].active" disabled="tabs[1].disabled">
      <a href="{{tabs[1].content}}"></a>
    </tab>
  </tabset>

您还可以嵌套

ng repeat

  <tabset ng-repeat="tabs in tabsetArray">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      <img ng-show="myPhotos" src="{{tab.content}}" alt="FBphoto">
    </tab> 
  </tabset>

---

我认为您想要使用的是

ng bind html unsafe

，它允许您直接将html标记包含到范围变量中，然后在模板上正确呈现。那大概是

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <div ng-bind-html-unsafe="tab.customElement"></div>        
</tab>

$scope.tabs = [
  {
    title : '',
    active : '',
    disabled : '',
    customeElement : '<a href="http://www.example.com">Test</a>'  
  },
  /*...other data..*/
];

---

下面是一个简单的例子，说明了我在上面解释的内容。

指令对此非常有用；当HTML元素发生变化时。您认为这样的解决方案：通过Do视图传递的两个指令和模板+控制器中的新变量（表示我要用于此数据的元素）可以以某种方式解决此问题吗？事实上，第一个解决方案仍然在HTML中包含数组索引，我希望避免这种情况。第二个解决方案是在内部添加标记，我的问题是使用适当的tab.content值动态地在内部添加元素。如果

tab.content

中有内容，则添加

标记，否则什么也不做。如果

tab.content

是一个包含多个元素的数组，那么添加多个

标记？不，我有像[{title:'photos'，content:'linktophoto'}，{title:'names'，content:obj.with.names}]这样的数据，当title是我想要在tab内的照片时，在第二种情况下，我想在它里面创建一个表。你可以使用

ng switch

和基于标题的开关，请参阅上面更新的答案和文档链接：ng switch很好使用，但我想知道使用它之后是否不会有太多重复的html，特别是当有嵌套的ng repeat时，这正是我想要的！Howewer我需要问一下使用它是否是一种好的做法？是的，毕竟它是一个Angularjs指令，请参阅。抱歉，答案中应该包含链接。此解决方案很诱人，但我不想从我的控制器修改DOM。我将尝试改用指令。谢谢你的帮助：）

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <div ng-bind-html-unsafe="tab.customElement"></div>        
</tab>

$scope.tabs = [
  {
    title : '',
    active : '',
    disabled : '',
    customeElement : '<a href="http://www.example.com">Test</a>'  
  },
  /*...other data..*/
];