如何在angularJs Md标签“ng-disabled”中分配动态值？

I'm using angularjs md-tab there could be approx 10 tabs so I want to enable and disable those tags as per some situations, Here is the code snippet which I'm using :

我正在使用angularjs md-tab,可能有大约10个标签,所以我想根据某些情况启用和禁用这些标签,这是我正在使用的代码片段:

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 as you can see in md-tab "ng-disabled='data.locked'" by using controller "locked: true" it disabled all of the md-tabs.

现在您可以通过使用控制器“locked:true”在md-tab“ng-disabled ='data.locked'”中看到它,它禁用了所有md-tabs。

What I want to do here is to enable 4 tabs and disable rest of the tabs.

我想在这里做的是启用4个选项卡并禁用其余选项卡。

What I'm planning to do here is to assign dynamic value under

我打算在这里做的是分配动态值

ng-disabled="data.locked"

e.g.

ng-disabled="data.firstTab",

ng-disabled="data.secondTab" and so on and disable them in controller.

ng-disabled =“data.secondTab”等等,并在控制器中禁用它们。

how can I do that and If there is any other way then please let me know.

我怎么能这样做?如果还有其他方式,请告诉我。

Thanks

3 个解决方案

#1

The example below demonstrates that each tab has its 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 to do it is to have a function which will take the video object as parameter and decides if the corresponding tab is locked or not. The function should return true/false value and be used as:

另一种方法是使用一个函数将视频对象作为参数,并决定相应的选项卡是否被锁定。该函数应返回true / false值并用作:

ng-disabled="isLocked(video)"

#2

Have an extra variable in videos array and based on that value you can disable it,

在视频阵列中有一个额外的变量,根据该值你可以禁用它,

$scope.videos =[];
$scope.video = {};
/*your params*/
$scope.video.tabStatus = true;
$scope.videos.push($scope.video);

In view

<md-tab label="{{video.name}}" ng-repeat="video in vm.videos" md-on-select="tabClicked()" id="tab" ng-disabled="video.tabStatus">

#3

in your view you are using this:

在您的视图中,您正在使用此:

ng-disabled="data.locked"

This will be global to all tabs so you want individualize this. For this task you can use a function on the ng-disabled attribute and pass it your actual card:

这将是所有标签的全局,因此您需要个性化。对于此任务,您可以使用ng-disabled属性上的函数并将其传递给您的实际卡片:

ng-disabled="disabledCard(video)"

This will pass the actual video element and in the funcion you can handle if you want disable it or not.

这将传递实际的视频元素,如果你想要禁用它,你可以处理的功能。

#1