AngularJS - 直接在 <form> 上声明 ng-model元素 [英] AngularJS - declare ng-model directly on the <form> element

问题描述

在 AngularJS 中，有什么方法可以直接在

元素上声明 ng-model，而不必在该表单的每个控件/输入上都这样做，然后才能通过名称访问控制器中控件的值?

In AngularJS, is there any way to declare ng-model directly on the <form> element instead of having to do it on every single control/input of that form and then be able to access the values of the controls in the controller through their names?

具体来说，如果您有这样的表单，

Specifically, if you have a form like this,

<form>
  <input type="text" name="email">
  <input type="text" name="age">
</form>

通常，你会做这样的事情，

typically, you'd do something like this,

<form>
  <input type="text" ng-model="user.email">
  <input type="text" ng-model="user.age">
<form>

然后您可以访问控制器中的用户对象及其属性:

which then gives you access to the user object and its properties in the controller:

$scope.user
$scope.user.email
$scope.user.age

我想做这样的事情:

<form ng-model="user">
  <input type="text" name="email">
  <input type="text" name="age">
</form>

然后能够访问控制器中的值:

and then be able to access the values in the controller:

$scope.user.email
$scope.user.age

我问的原因是我正在对现有的 web 项目进行角度化，并且一些表单很容易有 20 或 30 个控件，单独定义 ng-model 似乎有点矫枉过正.

The reason I'm asking is that I'm angularizing an existing web project and some of the forms have easily 20 or 30 controls and defining the ng-model individually seems like an overkill.

我能找到的所有表单示例都在各个控件上声明了 ng-model.我还能够挖掘这个 ticket 基本上说这样的事情会需要对 AngularJS 进行大修，所以我怀疑这可能是不可能的.但是这张票是一年前的，也许从那时起事情就发生了变化.

All the form examples that I'm able to find declare the ng-model on the individual controls. I was also able to dig up this ticket which basically says that something like this would require a major AngularJS overhaul, so I suspect it may not be possible. But the ticket is from a year ago and perhaps things have changed since then.

推荐答案

开箱即用；不.但是您可以很容易地编写自己的指令来实现这一点.

Out of the box; no. But you can quite easily write your own directive that does the trick.

app.directive('lazyFormModel', function() {
  return {
    require: ['form'],

    compile: function compile(tElement, tAttrs) {

      var modelName = tAttrs.lazyFormModel;

      angular.forEach(tElement.find('input'), function(e) {
        var $e = angular.element(e);
        var name = $e.attr('name');
        $e.attr('ng-model', modelName + '.' + name);
      });
    }
  };
});

上面将创建一个指令，该指令将遍历所有包含的 input 元素并根据 nameng-model 属性强>值.将此附加到表单元素，您就可以开始了:

The above will create a directive that will loop through all the containing input elements and stamp an ng-model attribute on them based on the name value. Attach this to a form element and you're good to go:

<form lazy-form-model="user">
  <input type="text" name="email">
  <input type="text" name="age">
</form>

查看实际效果:http://plnkr.co/edit/O7ais3?p=preview

编辑

作为旁注；您也可以扩展它以适应其他操作:例如自定义验证和/或 html 布局.

As a side note; you can extend this to fit other manipulations too: like custom validations and/or html layout.

编辑

您知道我如何扩展它以处理多个名称相同但值不同的复选框(一种清单类型的输入)吗?

Would you know how I could extend this to work with multiple checkboxes of the same name but different values (a checklist type of input)?

像这样的东西应该处理复选框:

Something like this should handle checkboxes:

angular.forEach(tElement.find('input'), function(e) {
  var $e = angular.element(e);
  var name = $e.attr('name');

  var modelProperty = modelName + '.' + name;

  if($e.attr('type') == 'checkbox') {
    modelProperty += '.' + $e.attr('value');
  }

  $e.attr('ng-model', modelProperty);
});

更新了plunker.

这篇关于AngularJS - 直接在 <form> 上声明 ng-model元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！