Как получить все поля ввода в форме (директива AngularJS)

Я хотел бы создать директиву, которая делает что-то удивительное со всеми полями ввода в форме.Как получить все поля ввода в форме (директива AngularJS)

Однако, я был бы счастлив, если бы я мог применить эту директиву, только один раз (на самом <form>) вместо того, чтобы его привязать ко всем <input> «s

Как я должен определить все формы входа элементы?

Я вижу несколько возможных решений:

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

Может быть, я даже близко настроенными и не вижу правильное решения здесь.

Любая помощь и opion ценится

источник

2013-11-07 user2422960

почему бы не использовать ANGULAR в jqLite (или JQuery, если вы хотите загрузить его)

angular.forEach(element.find('input'), function(node){ 
awesomize(node) 
});

источник

2013-11-07 08:50:29

Я до сих пор содрогнуться, когда речь идет об использовании JQuery материала для углового приложения. Тем не менее, я бы попробовал, спасибо за то, что указали на очевидный – user2422960

, вам нужно перебирать дерево до

Предупреждение: Это просто идея, которая работает в тривиальный пример. Я не говорю, что это неправильно (это открыто для обсуждения, хотя), но я НЕ использовал его в более сложном контексте.

Итак, вы можете создать вторую директиву 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 
      } 
     } 
    }; 
});

источник

2013-11-07 10:07:22

Мне это нравится подход. Он все равно должен связываться со всеми элементами 'input', но удобно, что происходит без каких-либо дополнительных тегов. Это не относится, например, к элементу 'textarea'. Просто нужно иметь в виду. –

Как получить все поля ввода в форме (директива AngularJS)

ответ

Смежные вопросы