Jest to możliwe i oto jak robię to samo z tabelą wejść.
owinąć stół w taką formę
Następnie po prostu użyj tego
Mam formularz z wieloma zagnieżdżonymi dyrektywami, z których wszystkie zawierają dane wejściowe, zaznaczenia, itp ... Te elementy są zawarte w ng-powtórzeń i dynamicznych wartościach ciągów.
Oto jak korzystać z dyrektywy:
<form name="myFormName">
<nested directives of many levels>
<your table here>
<perhaps a td here>
ex: <input ng-repeat=(index, variable) in variables" type="text"
my-name="{{ variable.name + '/' + 'myFormName' }}"
ng-model="variable.name" required />
ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
my-name="{{ variable.name + index + '/' + 'myFormName' }}"
</select>
</form>
Uwaga: jeśli chcesz serializować tabelę danych wejściowych, możesz dodawać i indeksować do konkatenacji ciągów; co właśnie zrobiłem.
app.directive('myName', function(){
var myNameError = "myName directive error: "
return {
restrict:'A', // Declares an Attributes Directive.
require: 'ngModel', // ngModelController.
link: function( scope, elem, attrs, ngModel ){
if( !ngModel ){ return } // no ngModel exists for this element
// check myName input for proper formatting ex. something/something
checkInputFormat(attrs);
var inputName = attrs.myName.match('^\\w+').pop(); // match upto '/'
assignInputNameToInputModel(inputName, ngModel);
var formName = attrs.myName.match('\\w+$').pop(); // match after '/'
findForm(formName, ngModel, scope);
} // end link
} // end return
function checkInputFormat(attrs){
if( !/\w\/\w/.test(attrs.rsName )){
throw myNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
}
}
function assignInputNameToInputModel(inputName, ngModel){
ngModel.$name = inputName
}
function addInputNameToForm(formName, ngModel, scope){
scope[formName][ngModel.$name] = ngModel; return
}
function findForm(formName, ngModel, scope){
if( !scope ){ // ran out of scope before finding scope[formName]
throw myNameError + "<Form> element named " + formName + " could not be found."
}
if( formName in scope){ // found scope[formName]
addInputNameToForm(formName, ngModel, scope)
return
}
findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
}
});
Powinno to rozwiązać wiele sytuacji, w których po prostu nie wiesz, gdzie będzie formularz. A może masz zagnieżdżone formularze, ale z jakiegoś powodu chcesz dołączyć tę nazwę wejściową do dwóch formularzy wyżej? Cóż, po prostu podaj nazwę formularza, do którego chcesz dołączyć nazwę wejściową.
To, czego chciałem, to sposób na przypisanie wartości dynamicznych do danych wejściowych, których nigdy nie poznam, a następnie wywołanie po prostu $ scope.myFormName. $ Valid.
Możesz dodać wszystko, co chcesz: więcej tabel, więcej danych wejściowych, zagnieżdżone formularze, cokolwiek chcesz. Po prostu podaj nazwę formularza, dla którego chcesz sprawdzić poprawność danych wejściowych. Następnie podczas przesyłania formularza zapytaj, czy $ scope.yourFormName. $ Jest prawidłowe