4

在 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

我问的原因是我正在对现有的 Web 项目进行角化，并且某些表单很容易有 20 或 30 个控件，并且单独定义 ng-model 似乎有点过头了。

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

4

2 回答 2

10

盒子外面; 不。但是您可以很容易地编写自己的指令来解决问题。

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。

于 2014-05-15T04:36:09.453 回答
2

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

例如：

<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>
于 2014-05-15T04:34:10.383 回答