Question

我的对话框上有两个标签。如何根据用户点击的按钮动态设置哪一个处于活动状态。

以下是我的按钮：

<md-button ng-click="showTabDialog($event, 'login')" class="md-raised md-primary">Login</md-button>

<md-button ng-click="showTabDialog($event, 'signup')" class="md-raised md-primary">Signup</md-button>

这是我的对话框html模板

<md-dialog aria-label="Login">
<form>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Login</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="cancel()">
                <md-icon aria-label="Close dialog"></md-icon>
                <!--md-svg-src="img/icons/ic_close_24px.svg"-->
            </md-button>
        </div>
    </md-toolbar>
    <md-dialog-content style="max-width:800px;max-height:810px; ">
        <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="Login">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Log In</h1>
                    <p>Login here or click sign up to create a new account.</p>
                </md-content>
            </md-tab>
            <md-tab label="Sign Up">
                <md-content class="md-padding">
                    <h1 class="md-display-2">Sign Up</h1>
                    <p>Sign Up here</p>
                </md-content>
            </md-tab>
        </md-tabs>
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <span flex></span>
        <md-button ng-click="answer('not useful')" >
            Not Useful
        </md-button>
        <md-button ng-click="answer('useful')" style="margin-right:20px;" >
            Useful
        </md-button>
    </md-dialog-actions>
</form>
</md-dialog>

这是我的JS：

$scope.showTabDialog = function(ev, button) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  &&       
$scope.customFullscreen;
    $mdDialog.show({
        controller: 'SignUpCTRL',
        templateUrl: 'app/login/signup.modal.html',
        parent: angular.element(document.h1),
        targetEvent: ev,
        clickOutsideToClose:true,
        openFrom: '#center',
        fullscreen: useFullScreen
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

重申一下，用户点击注册对话框，打开框，注册选项卡重点关注。用户点击登录按钮，对话框出现，登录标签为焦点。

Answer 1

编辑：更好的解决方案：

你可以选择＆＃34;选择＆＃34;具有范围变量的属性＆＃34; selectedIndex＆＃34;这将需要选择标签值。

<md-tabs selected="selectedTab" >

在相应的控制器中：

$scope.selectedTab=1;//tab number

然后，您可以使用按钮单击按钮更改其值来更改其值;

Answer 2

Angular Material内置md-tabs＆amp; md-tab指令具有需要覆盖的默认值，以便通过包含您自己的ng-class来设置md-active。选项卡上的Angular Material默认ng-class如下所示：

ng-class="{ 'md-active':tab.isActive(), 'md-focused':tab.hasFocus(), 'md-disabled':tab.scope.disabled }"

因为我的问题只有两个标签我通过捕获哪个按钮被传递到locals然后将其分配给我的控制器$scope.active中的变量来禁用默认选项卡，然后禁用默认选项卡用户没有像这样推送登录：

<md-tab label="Login" ng-disabled="active!='Login'">

Answer 3

我使用了两个模板，两个控制器和一个工厂。第一个模板具有用户单击的按钮：

<md-button ng-click="showTabDialog({tab: 0, event: $event})">One</md-button>

<md-button ng-click="showTabDialog({tab: 1, event: $event})">Two</md-button>

<md-button ng-click="showTabDialog({tab: 2, event: $event})">Three</md-button>

请注意从零开始的计数。点击会通过一个包含两个项目的数据对象：用户选择的选项卡和$event（一个MouseEvent）。

第一个控制器包含以下处理函数：

  $scope.showTabDialog = function(data) {
    var userData = {
      selectedTab: data.tab
    };
    userFactory.set(userData); // passes data object to other controllers
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'javascript/templates/tabDialog.html',
      parent: angular.element(document.body),
      targetEvent: data.event,
      clickOutsideToClose:true
    })
    .then(function(answer) {
      // fires on $scope.hide
    })
    .catch(function(error) {
      if (error) {
          console.error(error);
        }
      {
        // fires on $scope.cancel
      }
    });
  };

处理程序函数采用从单击的按钮传入的data对象，然后将数据对象发送到工厂，该工厂将数据对象传递给第二个控制器。接下来，$mdDialog.show用于创建选项卡式对话框，其中包含第二个控制器和第二个模板的参数。其余的都是样板。 targetEvent停止在DOM树上传播。如果您想对then和catch做一些事情，我会输入$scope.hide和$scope.cancel。

这是工厂：

app.factory('userFactory', function() {

  var userObject = null;

  function set(user) {
    userObject = user;
  };

  function get() {
    return userObject;
  };

  return {
    set: set,
    get: get
  };
});

我将第二个控制器放在处理程序功能下方的第一个控制器中：


  function DialogController($scope, $mdDialog) {
    $scope.user = userFactory.get();
    $scope.selectedTab = $scope.user.selectedTab || 0;

    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
  }

此控制器获取通过工厂传递的数据，然后将数据设置为其$scope。请注意，此控制器具有其自己的$scope，而不是第一个控制器的$scope。我不使用$scope.hide或$scope.answer，但我留了这些，以备您需要时使用。

最后，这是对话框的模板：

<md-dialog aria-label="tabbed dialog">
  <form>
    <md-toolbar>
    <div class="md-toolbar-tools">
      <img ng-src="myLogo.png" alt="logo" style="height: 36px;">
      <h2> MyCompany.com</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="cancel()">
        <md-icon md-svg-src="media/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content style="max-width:800px;max-height:810px; ">
    <md-tabs md-dynamic-height md-border-bottom md-selected="selectedTab">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>

      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>

      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>Lorem ipsum...</p>
        </md-content>
      </md-tab>
</md-tabs>
</md-dialog-content>

</form>
</md-dialog>

角度材料对话框选项卡

3 个答案: