Question

在AngularJS中，有没有办法直接在<form>元素上声明ng-model，而不必在该表单的每个控件/输入上执行它，然后才能访问控件的值在控制器中通过他们的名字？

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

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

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

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

然后，您可以在控制器中访问用户对象及其属性：

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

我想做这样的事情：

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

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

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

我之所以提出这个问题，是因为我正在对现有的网络项目进行推理，而且有些形式很容易有20或30个控件，并且单独定义ng模型似乎有点矫枉过正。

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

Answer 1

开箱即用;没有。但是你可以很容易地编写自己的指令来实现这一目的。

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

上面将创建一个指令，循环遍历所有包含输入元素，并根据名称标记 ng-model 属性强>价值。将它附加到表单元素，你就可以了：

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

查看实际操作：http://plnkr.co/edit/O7ais3?p=preview

修改

作为旁注;您可以扩展它以适应其他操作：如自定义验证和/或html布局。

修改

您是否知道如何扩展此功能以使用相同名称但不同值的多个复选框（输入核对表类型）？

这样的事情应该处理复选框：

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。

Answer 2

有一个名为angular-form-model的自定义指令可以解决这个问题。它使表单内的每个模型自动绑定到表单的ng模型。

例如：

<form jfb-form-model="user">
    <input name="email" />
    <input name="age" />
</form>

将转移到

<form jfb-form-model="user">
    <input name="email" ng-model="user.email"/>
    <input name="age" ng-model="user.age/>
</form>

AngularJS - 直接在<form>元素</form>上声明ng-model

2 个答案: