How to assign dynamic value in angularJs Md Tab "ng-disabled"? -


i'm using angularjs md-tab there approx 10 tabs want enable , disable tags per situations, here code snippet i'm using :

in view

<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabclicked()" ng-disabled="data.locked"> 

in controller

$scope.data = {                     selectedindex: 1,                     locked: true                 }; 

now can see in md-tab "ng-disabled='data.locked'" using controller "locked: true" disabled of md-tabs.

what want here enable 4 tabs , disable rest of tabs.

what i'm planning here assign dynamic value under

ng-disabled="data.locked"

e.g.

ng-disabled="data.firsttab",

ng-disabled="data.secondtab" , on , disable them in controller.

how can , if there other way please let me know.

thanks

the example below demonstrates each tab has own locked setting.

angular.module('myapp', ['ngmaterial']).controller('appctrl', function($scope) {      $scope.videos = [          {name: 'video1', locked: true},          {name: 'video2', locked: false},          {name: 'video3', locked: true},          {name: 'video4', locked: false}      ];  });
<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>    <script src="https://material.angularjs.org/latest/angular-material.min.js"></script>    <div ng-controller="appctrl" ng-cloak="" ng-app="myapp">  <md-tabs md-dynamic-height md-border-bottom>    <md-tab label="{{video.name}}" ng-repeat="video in videos" md-on-select="tabclicked()" id="tab" ng-disabled="video.locked">  </md-tabs>  </div>

another way have function take video object parameter , decides if corresponding tab locked or not. function should return true/false value , used as:

ng-disabled="islocked(video)" 

Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -