CODEWITHSUNDEEP
javascriptangularjsangular-material
prateek tomar
prateek tomar

Reputation: 362

tabs with same content in angular material

I have two md-tabs while using material with angularjs. Both the tabs contain most of same DOM tree structure, and just some unique content than each other. I am looking for an alternative in which I don't need to create same common DOM twice. Is there a way I can write it once, and use it in both the tabs. Following is HTML Code : 

<div ng-app="test" ng-controller="TestController">
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="FIRST" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab :{{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr1">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
      <md-tab label="SECOND" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab : {{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr2">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

Following is angular code : 

angular.module('test', ['ngMaterial'])
  .controller('TestController', function($scope) {
    $scope.counter = 0;
    $scope.arr1 = [1, 2, 3, 4, 5];
    $scope.arr2 = [5, 6, 7, 8, 9, 10];
    $scope.func1 = function() {
      $scope.counter++;
    };
  });

JS Fiddle

Upvotes: 3

Views: 1050

Answers (1)

Theraloss
Theraloss

Reputation: 700

What about this solution? http://jsfiddle.net/8u8wxhjz/17/

<md-tab ng-repeat="n in [1,2] track by $index" label="{{ labels[$index] }}" md-on-select="func1()">
  <md-content class="md-padding">
    <div>
      This is a very long DOM that is same in every tab : {{counter}}
    </div>
    <br>
    <div>
      This is dynamic
      <ul>
        <li ng-repeat="elem in arrs[$index]">{{elem}}</li>
      </ul>
    </div>
  </md-content>
</md-tab>

Repat the tabs with ng-repeat="n in [1,2] track by $index" and then we will use $index to retrieve the correct data from our $scope, for example:

$scope.labels = ['FIRST', 'SECOND']; // $index = 0, so it will take 'FIRST'

Upvotes: 1

Related Questions