Question

我正在用几个步骤做一个注册表单，用角度材料标签制作。我有5个标签，每个标签包含一些用户应填写的输入。标签下方还有2个按钮，一个用于到达下一个标签，一个按钮用于到达上一个标签。我想禁用即将发布的选项卡，并禁用将用户带到下一个选项卡的按钮，直到用户填写正确的选项卡。我希望用户能够返回并更改之前选项卡上已填写的信息，并且当所有选项卡都正确填写后，将显示一个发送按钮。所以，这是多步注册表单的基本功能。

我已设法使用ng-disabled和ng-hide执行按钮和标签的基本功能，同时更改控制器中变量tabNr的值，就像隐藏上一个 - 第一个选项卡上的按钮，并隐藏最后一个选项卡上的下一个按钮，并且工作正常。

当涉及到隐藏下一个按钮时，基于表单是否填充它有点棘手。我可以通过验证上一个标签上的表单来禁用下一个标签，如下所示：ng-disabled="!tab1Form.$valid"，这样硬编码就可以了。

但是，前一个和下一个按钮对于所有选项卡都是相同的，这是棘手的部分，因此如果表单无效，我不能只禁用该按钮，因为该按钮不知道哪个选项卡那是活跃的。我试图在控制器中创建一个函数，但问题是有效变量只是html中的一个东西而且我无法在控制器中对它进行评估。据我所知并已理解。

所以这是下一个按钮：

<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>

每个标签都有这个，有自己的编号：

<form name="tab1Form" novalidate>

我尝试过的是通过使用angular：

来更改应触发禁用的选项卡

ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"

浏览器似乎更改了数字，它适用于第一个选项卡，但在其余选项卡上它不会禁用该按钮，即使它应该，就像浏览器没有正确评估变量一样。我希望它能够起作用，因为我无法想到用这些变量做另一种方式......

这种使用角度的方式是不起作用还是我做错了什么？有没有人有我可以使用的解决方案？

Answer 1

在您的控制器中

<div class="container">
   <div class="img1">
      <div class="img2">

      </div>
   </div>
</div>

然后在你的HTML中

function Controller($scope){
   var vm = this;

   vm.form = $scope['tab' + anyNumber + 'Form'];

}

将变量内的变量传递给html

1 个答案: