0

angularjsのng-repeatに問題があります。達成したいのは、htmlの外側の要素のみをng-repeat'edにすることです。私が持っているものと達成したいものの例で紹介します。

私はこのようなタブセットの例を持っています:

      <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-repeat 要素を持つタブセット (配列インデックスがビューに表示されないようにするため) を持つことですが、内部に異なる要素がある場合、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 に答える