it-swarm.com.de

Name des dynamischen Formats <input type = "text" name = "{{Variablenname}}" /> in Angularjs

Wie würde jemand formName.inputName. $ Gültig verwenden, wenn der "inputName" dynamisch erstellt wurde?

  <form name="formName">
    <input ng-repeat="(variable) in variables"
           type="text" name="variable.name"
           ng-model="variable.name" required />
 </form>

Die Ausgabe des HTML-Eingabeattributs 'name' wäre die Zeichenfolge "variablename", die auf ALLE wiederholten Eingaben angewendet wird.

Wenn wir das probiert haben

<form name="formName">
  <input ng-repeat="(variable) in variables"
         type="text" name="{{ variable.name }}"
         ng-model="variable.name" required />
</form>

Die Ausgabe des HTML-Eingabeattributs 'name' wäre die Zeichenfolge "{{variable.name}}", die auf ALLE wiederholten Eingaben angewendet wird.

In beiden Fällen würde ein Namensattribut für jedes der wiederholten Eingabeelemente nicht dynamisch erstellt. ALLE Eingänge würden den gleichen Namen haben. Nicht sehr gut, wenn Sie eine bestimmte Eingabe basierend auf einem bestimmten Namen aufrufen möchten.

  • müssen dynamische Namenswerte verwenden
  • sie müssen $ scope.formName.dynamicName aufrufen können. $ valid
  • sie müssen $ scope.formName aufrufen können. $ valid
  • dynamische Namenseingabefelder müssen dem verschachtelten Formular oder Masterformular hinzugefügt werden
23
SoEzPz

Ich konnte die Antwort nicht finden, die einige oder alle dieser Bedürfnisse befriedigte. Das ist was ich mir ausgedacht habe. 

Es kann einen besseren Weg geben, bitte teilen Sie Ihre Gedanken mit.
Ich verwende Angularjs 1.3.0-beta.8

Ich habe ein Formular mit mehrfach geschachtelten Direktiven, die alle Eingaben, Auswahlen usw. enthalten .... Diese Elemente sind alle in ng-Wiederholungen und dynamischen Zeichenfolgenwerten eingeschlossen.

So verwenden Sie die Direktive:

<form name="myFormName">
  <nested directives of many levels>
    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 + '/' + 'myFormName' }}"
        </select>
</form>

Hinweis: Sie können die String-Verkettung hinzufügen und indizieren, wenn Sie möglicherweise eine Tabelle mit Eingaben serialisieren müssen. was ich getan habe. Dynamische Namenseingaben bedeuten jedoch, dass Sie möglicherweise den Namen der Formulareingaben nicht kennen. Wie würden Sie also $ scope.formName nennen. ?????? Sie könnten das $ scope.formName-Objekt iterieren, um Schlüssel zu erhalten, die einem bestimmten Wert entsprechen. Das bedeutet die Verkettung von Zeichenketten wie folgt:

my-name="{{ dynamicString + hello + '/' + 'myFormName' }}"

In $ scope.myFormName finden Sie dann den Namen der Formulareingabe, indem Sie einfach das Objekt durchlaufen und alle Schlüssel mit "Hallo" sammeln.

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
  }
});

Dies sollte viele Situationen bewältigen, in denen Sie einfach nicht wissen, wo sich das Formular befindet. Oder vielleicht haben Sie verschachtelte Formulare, möchten aber aus zwei Gründen diesen Namen an zwei Formularen anhängen? Geben Sie einfach den Formularnamen ein, an den Sie den Namen der Eingabe anhängen möchten.

Was ich wollte, war eine Möglichkeit, Eingaben, die ich nie kennen werde, dynamische Werte zuzuweisen, und dann einfach $ scope.myFormName. $ Valid zu nennen.

Dies kann ein Overkill sein und eine bessere Lösung gibt es in 1.3+. Ich konnte es in der Zeit nicht finden, die ich hatte. Das funktioniert jetzt für mich.

Viel Glück! Hoffe das hilft jemandem !!!!

2
SoEzPz

Anscheinend hat Angular 1.3 das Problem behoben ( https://stackoverflow.com/a/32907176/3854385 )

Dies ist jetzt mit Angular 1.3+ möglich:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

Demo

In einigen Fällen ist ein inneres Formular eine gute Lösung, wenn Sie die Informationen einfach weitergeben können: ( https://stackoverflow.com/posts/12044600/ ) Um das 'dynamische Name'-Problem zu lösen, you Sie müssen eine innere Form erstellen (siehe ng-form ):

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
            <button ng-click="doSomething(urlForm.socialUrl.$valid)">Test</button>
      </ng-form>
  </div>

Die andere Alternative wäre, dafür eine benutzerdefinierte Direktive zu schreiben.

Hier ist das jsFiddle, das die Verwendung des ngForm zeigt: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

20
Loren

arbeite für mich mit eckig 1.2.7

direktive:

var DynamicName = function() {
    return {
        restrict: 'A',
        priority: -1,
        require: ['ngModel'],
        link: function (scope, element, attr, ngModel) {
            ngModel[0].$name = attr.name;
        }
    };
};

app.directive('dynamicName', DynamicName);

wie benutzt man:

<div ng-repeat="phone in hrModel.phones">
    <input type="text"
           name="phones[{{$index}}]"
           ng-model="phones[$index]"
           dynamic-name
    />
</div>
0
ahiipsa