Question

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

在视图中

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

在控制器

中

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

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

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

我打算在这里做的是在

下分配动态值

ng-disabled =“data.locked”

e.g。

NG-禁用= “data.firstTab”，

ng-disabled =“data.secondTab”依此类推，并在控制器中禁用它们。

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

由于

Answer 1

下面的示例演示了每个标签都有自己的锁定设置。

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>

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

ng-disabled="isLocked(video)"

Answer 2

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

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

在视图中

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

Answer 3

在你看来你正在使用它：

ng-disabled="data.locked"

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

ng-disabled="disabledCard(video)"

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

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

3 个答案: