动态表单名称属性 <input type="text"name="{{ 变量名}}";/&gt;在 Angularjs 中 [英] Dynamic form name attribute &lt;input type=&quot;text&quot; name=&quot;{{ variable-name }}&quot; /&gt; in Angularjs

问题描述

如果inputName"是动态创建的，那么人们将如何使用 formName.inputName.$valid ?

 
<input ng-repeat="(variable) in variables"类型=文本"名称=变量名"ng-model="variable.name" 需要/></表单>

HTML 输入属性name"的输出将是字符串variablename"，它将应用于所有重复输入.

如果我们试过这个

<input ng-repeat="(variable) in variables"type="text" name="{{ variable.name }}"ng-model="variable.name" 需要/></表单>

HTML 输入属性 'name' 的输出将是字符串{{ variable.name }}"，它将应用于所有重复输入.

在这两种情况中的任何一种情况下，都不会动态创建每个重复输入元素的名称属性；所有输入将共享相同的输入名称.如果您想根据特定名称调用特定输入，那就没什么好处了.

• 需要使用动态名称值
• 需要能够调用 $scope.formName.dynamicName.$valid
• 需要能够调用 $scope.formName.$valid
• 需要将动态名称输入字段添加到嵌套表单或主表单中

解决方案

看起来 Angular 1.3 修复了这个问题 (https://stackoverflow.com/a/32907176/3854385)

现在可以使用 Angular 1.3+:

<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">输入名称</span>

</表单>

演示

在某些情况下，如果您可以只传递信息，内部表单是一个很好的解决方案:(https://stackoverflow.com/posts/12044600/)要解决动态名称"问题您需要创建一个内部表单(请参阅ng-form):

<ng-form name="urlForm"><input type="url" name="socialUrl" ng-model="social.url"><span class="alert error" ng-show="urlForm.socialUrl.$error.url">网址错误</span><button ng-click="doSomething(urlForm.socialUrl.$valid)">测试</button></ng-form>

另一种选择是为此编写自定义指令.

这里是 jsFiddle 展示了 ngForm 的用法:http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

How would someone use formName.inputName.$valid when the "inputName" was dynamically created?

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

The output of the HTML input attribute 'name' would be the string "variablename", which would applied to ALL repeated inputs.

If we tried this

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

The output of the HTML input attribute 'name' would be the string"{{ variable.name }}", which would be applied to ALL repeated inputs.

In either of these two conditions, a name attribute for each of the repeated input elements would not be created dynamically; ALL inputs would share the same input name. Not much good if you wanted to call a specific input based on a specific name.

• need to use dynamic name values
• need to be able to call $scope.formName.dynamicName.$valid
• need to be able to call $scope.formName.$valid
• need dynamic name input fields to be added to nested form, or master form

解决方案

Looks like Angular 1.3 fixed this (https://stackoverflow.com/a/32907176/3854385)

This is now possible with Angular 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

In some cases an inner form is a good solution if you can just pass the information: (https://stackoverflow.com/posts/12044600/) To solve the 'dynamic name' problem you need to create an inner form (see 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>

The other alternative would be to write a custom directive for this.

Here is the jsFiddle showing the usage of the ngForm: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

这篇关于动态表单名称属性 <input type="text"name="{{ 变量名}}";/&gt;在 Angularjs 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！