Передача переменной внутри переменной в угловую директиву в html

Question

Я делаю регистрационную форму с несколькими шагами, выполненными с вкладками углового материала. У меня есть 5 вкладок, каждый из которых содержит несколько входов, которые пользователь должен заполнить. У меня также есть две кнопки под вкладками, одна для перехода на следующую вкладку и одну кнопку, чтобы перейти на предыдущую вкладку. Я хочу отключить предстоящие вкладки, а также отключить кнопку, которая переводит пользователя на следующую вкладку, пока пользователь не заполнит вкладку, в которой он находится. Я хочу, чтобы пользователь мог вернуться и изменить информацию, которая уже заполнена на предыдущих вкладках, и когда все вкладки заполнены правильно, отображается кнопка отправки. Итак, это основные функции для многоступенчатой ​​формы регистрации.

мне удалось сделать основные функции для кнопок и вкладки с ng-disabled и ng-hide в сочетании с изменением значения по переменной tabNr в моем контроллере, как сокрытие предыдущей кнопки на первую вкладку и скрытие next- на последней вкладке, и это работает нормально.

Когда нужно дождаться, чтобы скрыть следующую кнопку, основываясь на том, что форма заполнена ее немного сложнее. Я могу отключить следующую вкладку, проверив форму на предыдущей вкладке следующим образом: 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"