Angularjs中的動態表單名稱屬性<input type =「text」name =「{{variable-name}}」/>

Question

當「inputName」動態創建時，他人如何使用formName.inputName。$ valid？

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

HTML輸入屬性「名稱」的輸出將是字符串「VARIABLENAME」，這將適用於所有的重複的輸入。

如果我們試圖此

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

HTML輸入屬性「名稱」的輸出將是字符串「{{variable.name}}」，這將適用於所有的重複的輸入。

在這兩個條件中的任何一箇中，每個重複輸入元素的名稱屬性都不會動態創建;所有輸入將共享相同的輸入名稱。如果您想根據特定的名稱調用特定的輸入，則效果並不好。

• 需要使用動態域名值
• 需要能夠調用$ scope.formName.dynamicName。$有效
• 需要能夠調用$ scope.formName。$有效
• 需要要添加到嵌套窗體或主窗體的動態名稱輸入字段

Answer 1

我無法找到滿足部分或全部這些需求的答案。這是我想出的。

可能有更好的方法，請分享您的想法。
我使用Angularjs 1.3.0-beta.8

我與多嵌套指令，所有包含輸入（S）形式，選擇（一個或多個），等... 這些元件都包含在ng-repeats和動態字符串值。

這是如何使用的指令：

<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> 

注意：你可以，如果你需要或許序列化的輸入表中添加和指數的字符串連接;這就是我所做的。但是，動態名稱輸入意味着您可能不知道表單輸入的名稱，那麼您將如何調用$ scope.formName。??????。您可以迭代$ scope.formName對象以獲得匹配特定值的鍵。這意味着字符串連接這樣的：

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

然後在$ scope.myFormName則可以通過將只是遍歷對象和收集，包括「你好」的任何鍵找到任何形式的輸入名稱。

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

這應該處理很多情況下，你只是不知道窗體將在哪裏。或者您可能嵌套了表單，但出於某種原因，您希望將此輸入名稱附加到兩個表單中？那麼，只需傳入您想要附加輸入名稱的表單名稱即可。

我想要的是一種將動態值分配給我永遠不會知道的輸入的方法，然後調用$ scope.myFormName。$ valid。

這可能是一個矯枉過正的問題，1.3+中存在更好的解決方案。我無法在我的時間找到它。這現在適合我。

祝你好運！希望這可以幫助別人！

Answer 2

不要忘記，您可以使用數組符號和字符串索引訪問JavaScript對象。鑑於以下任意形式定義對象：

$scope.form_def = { 
    form_name : 'BallForm', 
    variables : [ 
    height : { name : 'Height', type : 'text' }, 
    width : { name : 'Width', type : 'text' }, 
    color : { name : 'Color', type : 'multi', options : ['red', 'green', 'blue'] } 
    ] 
}; 
$scope.form_values = {}; 

...和HTML片段...

<form name="{{ form_def.form_name }}"> 
    <div ng-repeat="variable in form_def.variables"> 
    <input ng-if="variable.type==='text'" type="text" name="{{ variable.name }}" ng-model="form_values[variable.name]"> 
    <select ng-if="variable.type==='multi'" name="{{ variable.name }}" ng-model="form_values[variable.name]"> 
     <option ng-repeat="opt in variable.options" value="{{ opt }}">{{ opt }}</option> 
    </select> 
    </div> 
</form> 

控制器內部，你會再有一個很好的form_values對象，而您可以訪問各個領域通過迭代form_def.variables散列中的鍵。

一旦你開始編寫這些通用的表單處理腳本，並且在我看來最終會有很多意大利麪代碼的地獄，並且你可能會更好地使用更少的代碼一般的解決方案，但那是另一個SO問題。

Answer 3

看起來像固定角1.3本（https://stackoverflow.com/a/32907176/3854385）

這現在是可能的角1.3+：

<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

在一些情況下的內形式是一個很好的解決方案如果您只能傳遞以下信息：（https://stackoverflow.com/posts/12044600/） 要解決'動態名稱'問題您需要d創建的內表（見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> 

另一替代方案將是寫此自定義指令。

這裏是的jsfiddle顯示ngForm的用法：http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/我

Answer 4

工作，角1.2.7

指令：

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

howtouse：

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

Answer 5

編譯你的輸入名稱

1. 正如別人指出的，棱角分明的現代版本有固定的這個...
2. 這應該設置在您輸入的name屬性，以及模型控制器添加到窗體：

 
    angular.module('MOD') 
     .directive('compiledName', compiledNameDirective); 

    function compiledNameDirective() { 
     return { 
      restrict: 'A', 
      require: ['ngModel', '?^form'], 
      scope: { 
       name: '@compiledName' 
      }, 
      link: function checkboxIndeterminateLink(scope, element, attributes, required) { 
       var ngModelController = required[0], ngFormController = required[1]; 
       ngModelController.$name = scope.name; 
       element.attr('name', scope.name); 
       if (ngFormController) ngFormController.$addControl(ngModelController); 
      } 
     }; 
    }