0

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

我想要的是具有 ng-repeated 元素的 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>
4

2 回答 2

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..*/
];

这是我上面解释的一个简单例子的小提琴。

于 2013-09-05T18:53:29.150 回答
0

如果我对您的理解正确，那么这就是您要查找的内容：

  <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>
于 2013-09-05T18:32:53.150 回答