2016-07-06 7 views
5

コントローラの配列からデータをロードしてテーブルに保持するHTMLテンプレートがあります。また、私はテーブル行のために移譲を行う指示文を持っています。データ配列はAPIリクエストで埋められています。新しいリクエストの後、リクエスト結果がテーブルにマージされます。以前の結果をクリアするのではなく、リクエストごとに1セットの行が追加されます。リクエスト前に前のデータをクリアする

私のアレイの状態をチェックするために私のコントローラコードをデバッグしましたが、それは各リクエストの前にクリアされています。それは確かだ。しかし、新しい結果が以前に追加されています。理由は、私の抜け落ち指示のテンプレートにあると思う。

テンプレートは以下のようになります。

angular.module('app').directive('myResult', 
['$compile', 
function ($compile) { 
    return { 
     transclude: true, 
     templateUrl: '/Scripts/app/templates/resultTemplate.html', 
     compile: function (tElement, tAttr, transclude) { 
      var contents = tElement.contents().remove(); 
      var compiledContents; 
      return function (scope, iElement, iAttr) { 
       if (!compiledContents) { 
        compiledContents = $compile(contents, transclude); 
       } 
       compiledContents(scope, function (clone, scope) { 
        iElement.replaceWith(clone); 
       }); 
      }; 
     } 
    } 
}]); 

そして最後にトランスクルーのために使用されるテンプレート:

<tr class="big-bord"> 
    <td colspan="4"><h3>{{result.fullName}}</h3></td> 
</tr> 
<tr ng-repeat="item in result.items"> 
    <td>{{item.value1}}</td> 
    <td>{{item.value2}}</td> 
    <td>{{item.value3}}</td> 
    <td>{{item.value4}}</td> 
</tr> 

どのようにすることができます。ここ

<div class="row"> 
    <div class="col-md-12"> 
     <div id="results" ng-show="results.length > 0"> 
      <table class="table result-table"> 
       <thead> 
        <tr> 
         <th>1</th> 
         <th>2</th> 
         <th>3</th> 
         <th>4</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="result in results" my-result></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

は私のトランスクルーディレクティブのコードです各APIリクエストの前に結果をクリアしますか?

+0

どのバージョンのAngularを使用していますか? Angular 1.4の文書によると、compile(transclude)は推奨されなくなりました。 – jbrown

+0

jbrown、私は角度1.5.7を使用します。移籍の代わりに何が来ますか? – Waldemar

+0

角度文書では、「代わりにリンク関数に渡される関数を使用する」と記載されています。詳細はこちらhttps://docs.angularjs.org/api/ng/service/$compile – jbrown

答えて

4

私は私の問題を解決しました。複数の<tbody>タグが1つのテーブル内で使用できることが判明しました。だから、僕は<のtbody >タグに私のngのリピートを移動:

<tbody ng-repeat="result in results"> 
    <tr class="big-bord"> 
     <td colspan="4"><h3>{{result.fullName}}</h3></td> 
    </tr> 
    <tr ng-repeat="item in result.items"> 
     <td>{{item.value1}}</td> 
     <td>{{item.value2}}</td> 
     <td>{{item.value3}}</td> 
     <td>{{item.value4}}</td> 
    </tr> 
</tbody> 

だから、私はまったくのディレクティブは必要ありません。

+1

複数の 'tbody'を避けたいのであれば、最初の行で 'ng-repeat-start'を、2行目で' ng-repeat-end'を使用できます。 [その他の情報](https://docs.angularjs.org/api/ng/directive/ngRepeat) –

関連する問題