Javascript 角材料惯性载荷

我最近开始使用AngularJS，但在使用md tabs（）时遇到了问题

在我的页面上，我有几个选项卡，通过ng repeat在每个选项卡中放置了大约30个图像。问题是，打开页面时，所有选项卡中的所有图像都在加载，这需要很长时间。我更喜欢在页面打开时只加载第一个（活动）选项卡的内容，而所有其他选项卡的内容只在它们变为活动时加载

以下是我的选项卡代码：

<md-content>
    <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
        <md-tab label="Tab One">
            <md-content class="md-padding">
                <div ng-repeat="fruit in Fruits">
                    <img ng-src="images/{{ fruit.FruitId }}.png">
                    <h4>{{ fruit.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Two">
            <md-content class="md-padding">
                <div ng-repeat="veg in Vegetable">
                    <img ng-src="images/{{ veg.VegId }}.png">
                    <h4>{{ veg.Name }}</h4>
                </div>
            </md-content>
        </md-tab>

        <md-tab label="Tab Three">
            <md-content class="md-padding">
                <div ng-repeat="animal in Animals">
                    <img ng-src="images/{{ animal.AnimalId }}.png">
                    <h4>{{ animal.Name }}</h4>
                </div>
            </md-content>
        </md-tab>
    </md-tabs>
</md-content>

{{fruit.Name}
{{veg.Name}
{{animal.Name}

因此，本质上我想做的是‘延迟加载’每个选项卡的内容，以便仅在选择相关选项卡时加载内容

由于我对Angular很陌生，我不确定如何处理这个问题。我注意到它已被突出显示为一个问题（），但尚未提供解决方案

我曾考虑使用ng if和ng include的组合来动态地将内容添加到所选选项卡，但我真的不知道从何处开始使用这种方法

---

任何帮助都将不胜感激

md选项卡

已选择属性

md

例如：

<md-tabs
        md-selected="selectedIndex" 
        md-center-tabs="true"
        md-stretch-tabs="always"
        md-dynamic-height 
        md-border-bottom="">

---

一种简单的方法是在第一次选择选项卡时将标志设置为true，并等待构建内容DOM，直到标志为true。你必须这样做：

• 使用选项卡上的

  md on select=“：：tabXXDisplayed=true”

  在第一次显示时将变量设置为true（该

  ：：

  使表达式成为一次性表达式）
• 在选项卡内容上使用

  ng if=“tabxxdisplated”

下面是一个snipplet示例：

<md-tab md-on-select="::tabXXDisplayed = true">
    <md-tab-label>tabXX</md-tab-label>' +
    <md-tab-body>
      <div ng-if="tabXXDisplayed">
        // your content for tabXX here
      </div>
    </md-tab-body>
  </md-tab>

tabXX'+
//这里是您的tabXX内容

<md-tab md-on-select="::tabXXDisplayed = true">
    <md-tab-label>tabXX</md-tab-label>' +
    <md-tab-body>
      <div ng-if="tabXXDisplayed">
        // your content for tabXX here
      </div>
    </md-tab-body>
  </md-tab>