防止角材料中的标签更改事件md-tab
问题描述:
是否可以防止角材料的md-tabs或md-tab指令中的标签更改? 我使用md-on-select指令在单击选项卡后执行函数,并将特定选项卡的md-active值设置为false。但该选项卡开关仍然发生,我似乎没有能够阻止它:防止角材料中的标签更改事件md-tab
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Tab1" md-active="ctrl.selectTab1" md-on-select="ctrl.tabClicked('Tab1')">
<md-content>
myContent
</md-content>
</md-tab>
<md-tab label="Tab2" md-active="ctrl.selectTab2" md-on-select="ctrl.tabClicked('Tab2')">
<md-content>
mycontent
</md-content>
</md-tab>
</md-tabs>
</md-content>
在控制器功能我有
function tabClicked(tab) {
switch (tab) {
case 'Tab1':
vm.selectTab1 = true;
vm.selectTab2 = false;
break;
case 'Tab2':
vm.selectTab1 = false;
vm.selectTab2 = true;
break;
}
}
答
这是个例,但林不知道,如果这你想要什么
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<md-content>
<md-tabs md-dynamic-height md-border-bottom md-selected="selected" >
<md-tab label="Tab1" ng-click="tabClicked('Tab1')">
<md-content>
myContent 1
</md-content>
</md-tab>
<md-tab label="Tab2" ng-click="tabClicked('Tab2')">
<md-content>
mycontent 2
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
angular.module("myApp",['ngMaterial']).controller("MyCtrl", function($scope) {
$scope.selected = 0
$scope.tabClicked = function(tab) {
switch (tab) {
case 'Tab1':
$scope.selected = 0
break;
case 'Tab2':
$scope.selected = 0
break;
}
}
});
我希望能够帮助您
+0
谢谢。我昨天也找到了这个解决方案:) – YourReflection
+0
这并不妨碍md-tab移动到下一个选项卡。它实际上移动,然后回到以前。我想知道是否有办法实际防止md-tab移动。这可以帮助我们在移动之前验证数据。 – alexandergs
我不明白你的问题。你想“禁用”某个标签吗? – Founded1898
如果要禁用相同的选项卡,可以使用ng-disabled标记而不是md-active =“false” –
不,我想阻止选项卡更改。例如:最初我在第一个标签页上,然后单击第二个标签,我不想更改为第二个标签,但保留在第一个标签上。 – YourReflection