帶有角度的選項卡：僅點擊$ http時加載選項卡內容

我有大量的數據，大表單，因此我希望每個選項卡都有大量數據。

我希望標籤內容可以在標籤標題點擊時延遲加載，然後在稍後再次選擇時不需要重新加載。

我覺得這個例子中進入的我想要的方向： angular-ui tabs loading template in tab-content

但這似乎加載靜態模板：

<tabs> 
    <pane active="pane.active" 
      heading="{{pane.title}}" 
      ng-repeat="pane in panes"> 
     <div ng-include="pane.content"></div> 
    </pane> 
</tabs>

我如何動態地$ HTTP負載窗格的內容。得到（）？注意：這已經是一個通過ng-view路由加載的頁面，所以我不能做嵌套路由。

編輯：內容是每一個標籤完全不同，所以最好我想提供一個功能，併爲每一個選項卡或類似的東西模板...

我猜角UI是一個好辦法去做這個？

來源

2013-11-05 faboolous

很好奇我自己如何讓標籤通過ajax加載。這是我制定的一個小演示。

選項卡具有select屬性，該屬性在選中時觸發。所以我用下面的標籤：

<tab heading="{{tabs[0].title}}" select="getContent(0)"> 
     <div ng-hide="!tabs[0].isLoaded"> 
     <h1>Content 1</h1> 
      <div ng-repeat="item in tabs[0].content"> 
      {{item}} 
      </div> 
     </div> 
     <div ng-hide="tabs[0].isLoaded"><h3>Loading...</h3></div> 
    </tab>

控制器：

$scope.tabs = [ 
    { title:"AJAX Tab 1", content:[] , isLoaded:false , active:true}, 
    { title:"Another AJAX tab", content:[] , isLoaded:false } 
    ]; 


    $scope.getContent=function(tabIndex){ 

    /* see if we have data already */ 
    if($scope.tabs[tabIndex].isLoaded){ 
     return 
    } 
    /* or make request for data , delayed to show Loading... vs cache */ 
    $timeout(function(){ 
     var jsonFile='data'+(tabIndex +1)+'.json' 
     $http.get(jsonFile).then(function(res){ 
      $scope.tabs[tabIndex].content=res.data; 
      $scope.tabs[tabIndex].isLoaded=true; 
     }); 

    }, 2000) 

    }

會緩存移動到一個服務，如果用戶切換視圖，並返回，數據仍將是服務緩存

DEMO

來源

2013-11-05 04:37:40 charlietfl

最後我做這樣的事情的！使用select，但使用ng-include指令進行模板。你的雖然是更復雜的，包括緩存的東西，所以這個被接受:)謝謝 – faboolous

我只簡化了內容部分。使用inclde certianly使標記更清潔。回答更多關於如何使ajax工作 – charlietfl

另一種方法是使用動態ng-include：

<tabset> 
    <tab ng-repeat="tab in tabs" 
     heading="{{tab.heading}}" 
     select="setTabContent(tab.content)"> 
    </tab> 
</tabset> 
<ng-include src="tabContentUrl"></ng-include>

然後控制器有這樣的：

$scope.tabs = [ 
    { heading: 'Dashboard', content: 'dashboard' }, 
    { heading: 'All Nodes', content: 'nodes' }, 
    { heading: 'Details', content: 'details' }, 
    { heading: 'Dependencies', content: 'dependencies' } 
]; 

$scope.setTabContent = function(name) { 
    $scope.tabContentUrl = "view/" + name + "/index.html"; 
}

來源

2015-06-12 16:28:14

這是很好的答案，但我認爲ng-include應該在裏面標籤 –

目前還不能仔細研究這一點，但我相信把它放在標籤中會更多典型的情況下，你急於加載標籤內容（所以你用你描述的方式將內容以邏輯方式綁定到標籤），而在這裏我只是使用標籤作爲選擇在共享區域顯示內容的方式。 –

帶有角度的選項卡：僅點擊$ http時加載選項卡內容

回答

相關問題