动态表单名称属性＆LT;输入类型=＆QUOT;文字＆QUOT;名称= QUOT; {{变量名}}＆QUOT; /＆GT;在Angularjs [英] Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs

问题描述

怎么会有人用formName.inputName。$时有效inputName动态创建？

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>

HTML输入属性'名称'将是字符串变量名的输出，这将适用于所有的重复投入。

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

如果我们试图这样

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

HTML输入属性名称将字符串{{variable.name}}，这将适用于所有的重复输入的输出。

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.

• 需要使用动态域名值


• 需要能够调用$ scope.formName.dynamicName。$有效


• 需要能够调用$ scope.formName。$有效


• 需要动态名称输入字段要添加到嵌套形式，或主表单

推荐答案

我无法找到满足一些或所有这些需求的答案。这是我想出了。

I could not find the answer that satisfied some or all of these needs. This is what I came up with.

有可能是一个更好的办法，所以请分享你的看法。结果
我使用Angularjs 1.3.0-beta.8

There may be a better way, so please share your thoughts.
I am using Angularjs 1.3.0-beta.8

我有多重嵌​​套的指令，所有包含输入（S）形式，选择（S），​​等等。
这些元素都包含在NG-重复和动态的字符串值。

I have a form with multi-nested directives that all contain input(s), select(s), etc... These elements are all enclosed in ng-repeats, and dynamic string values.

这是如何使用的指令：

<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对象，以获得符合特定值的键。这意味着字符串连接是这样的：

Note: you can add and index to the string concatenation if you need to serialize perhaps a table of inputs; which is what I did. However, dynamic name inputs means you may not know the name of the form input, so how would you call $scope.formName.??????. You could iterate of the $scope.formName object to get keys that match a certain value. That means string concatenation like this:

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

然后在$ scope.myFormName你只需遍历对象，并收集，包括任何键找到任何形式的输入名称'你好'。

Then in $scope.myFormName you would find any form input name by just iterating over the object and gathering any keys that included 'hello'.

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

这应该处理很多情况下你只是不知道在哪里的形式会。或许你有嵌套形式，但要将此名称输入连接到两种形式的一些原因是什么？好吧，只是通过在窗体名称要输入名称重视。

This should handle many situations where you just don't know where the form will be. Or perhaps you have nested forms, but for some reason you want to attach this input name to two forms up? Well, just pass in the form name you want to attach the input name to.

我想要的东西，是动态值分配给我永远不会知道输入的方式，然后只需调用$ scope.myFormName。$有效。

What I wanted, was a way to assign dynamic values to inputs that I will never know, and then just call $scope.myFormName.$valid.

这可能是矫枉过正，和一个更好的解决方案在1.3+存在。在一次我有我找不到它。现在，这对我的作品。

This may be an overkill, and a better solution exists in 1.3+. I couldn't find it in the time I had. This works for me now.

祝你好运！希望这可以帮助别人！！！！

Good luck! Hope this helps someone!!!!

这篇关于动态表单名称属性＆LT;输入类型=＆QUOT;文字＆QUOT;名称= QUOT; {{变量名}}＆QUOT; /＆GT;在Angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！