个人中心
gpt4 book ai didi

angularjs - 如何获取表单中的所有输入字段(AngularJS 指令)

转载 作者：行者123 更新时间：2023-12-02 04:45:47 25 4
gpt4 key购买 nike

我想创建一个指令，它对表单中的所有输入字段做一些很棒的事情。

但是，如果我可以只应用该指令一次(对 <form> 本身)而不是让它绑定(bind)到所有 <input>，我会很高兴。的

我应该如何确定所有表单输入元素？

我看到了一些可能的解决方案:

element[0].childNodes  // filter all inputs
element[0].children
element[0].elements   // seems to contain nothing but the stuff i want

也许我心胸狭隘，在这里看不到正确的解决方案。

感谢任何帮助和意见

最佳答案

警告:这只是一个在简单示例中起作用的想法。我并不是说它是错误的(尽管这有待讨论)，但我没有在更复杂的上下文中使用过它。

所以...您实际上可以创建第二个 input 指令，并仅在另一个指令(比方说 myDirective)应用于封闭表单时才应用它。

假设您有 2 种形式:

<body>
    <form name="myForm1" ng-controller="MainCtrl">
      Name: <input id="name1" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname1" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
    <br/>
    <form name="myForm2" ng-controller="MainCtrl" my-directive>
      Name: <input id="name2" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname2" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
</body>

只有第二种形式被标记 my-directive。现在，您的指令可能如下所示:

app.directive("myDirective", function(){
    return {
        restrict: 'A',
        require: ['form'],
        controller: function() {
          // nothing here
        },
        link: function(scope, ele, attrs, controllers){
          var formCtrl = controllers[0];
          console.log("myDirective applied to form:", formCtrl.$name);
        }
    };
});

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: '^?myDirective',
        link: function(scope, ele, attrs, ctrl){
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});

查看live并查看日志。原始的 input 指令与您自己的指令并存。证明是表单仍然有效(当您键入时，模型会更新:这是 input 的，然后是 ngModel 的工作)。

您的 input 指令也可以使用 ngModel 来操作输入值:

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: ['?ngModel', '^?myDirective'],
        link: function(scope, ele, attrs, ctrls){
          var ngModel = ctrls[0];
          var myDirective = ctrls[1];
          if (myDirective) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});

关于angularjs - 如何获取表单中的所有输入字段(AngularJS 指令)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19831252/

25 4 0
文章推荐： java - 映射中存在重复列，用于抛出没有重复列的实体异常
文章推荐： ruby-on-rails - 将继承的对象保存到 Mongoid 中的单独集合中
文章推荐： java - 如何通过java获取Xml的本地属性值
文章推荐： java - 如何在程序之外加载类？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com