2016-07-05 110 views
1

單擊按鈕時,我將tfoot附加到tabletfoot的內容是.load到本地.html文件的結果。雖然我的解決方案有效,但我在每次點擊時都會執行到.html文件。第一次點擊的結果可以存儲在一個變量中,並重用?將.load html文件的內容存儲在變量中

$scope.btnClick = function() { 

    var tfoot = $('#datepicker table').find('tfoot'); 
    if(!tfoot.length) { 
     tfoot = $('<tfoot>').appendTo('#datepicker table'); 
    } 

    tfoot.load('myDir/calendar/customFooter.html'); 

} 
+0

並把它作爲一個全局變量,你是什麼意思? –

+0

在本地存儲中創建數據存儲或變量或甚至存儲。太多的選項可用。人們使用它們很多 –

回答

2

您可以通過使用在load()方法回調到存儲結果實現這一目標。我使用$scope這個變量,但你可以根據需要修改它。試試這個:

$scope.btnClick = function() {  
    var tfoot = $('#datepicker table').find('tfoot'); 
    if (!tfoot.length) { 
     tfoot = $('<tfoot>').appendTo('#datepicker table'); 
    } 

    if ($scope.tfootContent) { 
     tfoot.html($scope.tfootContent); 
    } else { 
     tfoot.load('myDir/calendar/customFooter.html', function(response) { 
      $scope.tfootContent = response; 
     }); 
    } 
} 
+0

'tfoot.html(scope.tfootContent)'=>'tfoot.html($ scope.tfootContent);' - '$'錯過 – dinesh

+0

這個工作完美,謝謝! –

+0

斑斕的@dinesh,謝謝。答案已更新。 –

1

可以使用templateCache對於這一點,(見參考文獻在這裏 - >https://docs.angularjs.org/api/ng/service/ $ templateCache),我相信這將是一個更好的辦法。這樣你就不需要做額外的工作,它會被緩存。你會顯示在按鈕點擊TFOOT所以這將是這樣的:

$scope.btnClick = function() { tfootVisible = true;} 

,並在HTML

<table id="datepicker"> 
    <tfoot ng-include="'templateId.html'" ng-if="tfootVisible"></tfoot> 
</table> 
+0

謝謝,看起來很有趣。我仍然需要在點擊時注入tfoot,因爲這不是開箱即用的datepicker的一部分html –

+0

@Oam嘗試在html中進行所有html操作,並避免jquery在控制器中儘可能多地追加。由於你編碼的視圖只是包含並使其在開始時使用ng-if不可見。如果你不必使用datepicker,你可以從這裏檢查datepicker:https://angular-ui.github.io/bootstrap/(datepicker popup) –