表单 – AngularJS – 直接在元素上声明ng-model

概述在AngularJS中,有没有办法直接在< form>上声明ng-model？元素而不是必须在该表单的每个控件/输入上执行它,然后能够通过其名称访问控制器中的控件的值？ 具体来说,如果您有这样的表格, <form> <input type="text" name="email"> <input type="text" name="age"></form> 通常,你会做这样的事情, <fo 在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大修,所以我怀疑它可能是不可能的.但机票是从一年前开始的,也许事情从那时起就发生了变化.

解决方法 盒子外面;没有.但是你可以很容易地编写你自己的指令来完成这个伎俩.

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布局.

编辑

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)?

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

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 – 直接在元素上声明ng-model全部内容，希望文章能够帮你解决表单 – AngularJS – 直接在元素上声明ng-model所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。