変数内の変数をhtmlの角度指令に渡します

Question

角度のある材質のタブで作成されたいくつかのステップでサインフォームを実行しています。私は5つのタブには、ユーザーが記入する必要があるいくつかの入力が含まれています。私はまた、タブの下に2つのボタンを、次のタブに移動するための1つのボタンと前のタブに到達する。私は、今後のタブを無効にし、ユーザーが適切なタブを埋めるまで、次のタブに移動するボタンを無効にしたい。以前のタブで既に入力された情報を元に戻して変更することができ、すべてのタブが正しく入力されると、送信ボタンが表示されます。つまり、それは複数ステップのサインアップフォームの基本機能です。

私はng-disabledと最初のタブで、前のボタンを隠し、ネクストを隠すように、私のコントローラで変数tabNr上の値を変更すると組み合わせるng-hideとボタンの基本的な機能とタブを行うために管理していますボタンを押すと、正常に動作します。

フォームが少し複雑になった場合には、次のボタンを隠すことになります。私は次のタブを無効にすることができます：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> 

私が試したことはトリガすべきタブを、変更することです

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

ブラウザは番号を変更しているように見えますが、最初のタブでは機能しますが、タブの残りの部分は、たとえブラウザが変数を適切に評価しない場合など、ボタンを無効にしません。これらの変数を使って別の方法を考えることができないので、私はそれがうまくいくと思っていました...

このように角度を使うのは簡単ではないのですか、何か間違っていますか？誰も私が使用できる解決策を持っていますか？お使いのコントローラで

Answer 1

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

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

} 

は、あなたのHTML

ng-disabled="!FormCtrl.form.$valid"