Question

我在angularjs中遇到ng-repeat的问题，我想要实现的是在html中使用ng-repeat'ed只有外部元素，我将在一个例子中介绍它我拥有的和我想要实现的内容。

我有这样的示例tabset：

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

我想要的是具有ng重复元素的tabset（以避免视图中的数组索引）但内部有不同的元素，是否可以在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>

Answer 1

我认为您想要使用的是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>

然后在您在tabs中定义$scope数据的控制器中，您将拥有类似的内容。

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

这是一个fiddle，其中有一个我上面解释过的例子。

Answer 2

如果我理解正确，那么这就是你要找的东西：

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

模型应该是这样的：

$scope.tabsetArray = [ {'tabs': []}, {'tabs': []}, {'tabs': []} ... ];

你也可以嵌套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-switch

<div ng-repeat="tabs in tabsetArray" ng-switch on="tab.title">
  <a  ng-switch-when="names" >do your thing here</a>
  <img  ng-switch-when="photos">
</div>

ng-repeat only外部元素

2 个答案: