我正在尝试设置等的输入
<form name="myForm">
<input name="{{ name }}"/>
</form>
它的工作原理在DOM。 我懂了
<input name="whatever_name_is_set_to"/>
然而，在我ngForm我有
$scope.myForm: {
{{ name }}: { }
}
卫生署”
我为什么这样做呢？ 我试图创建一个指令，这样我可以编程方式创建我的形式。 然后，我可以这样做
<div my-field
name="credits"
field="course.credits"
field-options="courseOptions.credits"
title="Credits"
></div>
Plunker
对于AngularJS> = 1.3 插补现在支持输入名称 。
我昨天刚回答过类似的问题有关动态命名的表单元素 。 总之，不，你不能使用插值来动态命名您的表单字段 - 插值字符串将字段名结束了，你都看见了。
在你的情况，你可能会需要寻找到动态编译你内部的输入HTML myField指令。
下面是一个简化的例子使用$compile来动态地生成表单元素： http://jsfiddle.net/Sly_cardinal/XKYJ3/
HTML：
<div ng-app="myApp">
<form name="myForm" ng-controller="myController">
<div my-field
name="courseName"
field="course.courseName"
title="Course Name"></div>
<div my-field
name="credits"
field="course.credits"
title="Credits"></div>
<!-- Show that the values are bound. -->
<pre>course: {{course | json:' '}}</pre>
<!-- Show that the field is being registered with the ngFormController. -->
<pre>myForm.credits.$dirty: {{myForm.credits.$dirty}}</pre>
</form>
</div>
JavaScript的：
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
$scope.course = {
credits: 100,
courseName: 'Programming 201'
};
}])
.directive('myField', ['$compile', '$parse', function($compile, $parse){
// In a real project you'd probably want to use '$templateCache' instead
// of having strings in your code.
var tmpl = $compile('<label>{{title}}</label>');
return {
scope: true,
link: function(scope, element, attr){
scope.title = attr.title;
var newEl = angular.element('<input type="text"/>');
newEl.attr('ng-model', attr.field);
newEl.attr('name', attr.name);
tmpl(scope, function(fieldEl, scope){
$compile(newEl[0].outerHTML)(scope, function(el, scope){
fieldEl.append(el);
element.append(fieldEl);
});
});
}
}
}]);
在这个例子中的注意事项：
这是一个非常特殊的情况-生成动态表单元素-这需要使用$compile 。 这是不是与角输入表单时“去”的解决方案 - 角将处理所有与指令中的常见情况，数据绑定和其他一切的框架提供。 此外，如马克·克莱恩的评论节目，它看起来像在某个点角将处理动态表单管理本身在未来的某一时刻。
如果你使用继续向下的路径$compile生成这些表单元素，那么你很可能要使用$ templateCache来管理您的模板，这样你就不会试图管理您的指令中的模板字符串。
老问题，但如果有人在寻找一种方式做什么的问题问，你可以创建将动态创建后的元素的名称指示$compile荷兰国际集团它。
该@Sly_cardinal贴出答案的更新的版本是在这里： http://jsfiddle.net/XKYJ3/1/
HTML
<div ng-app="myApp">
<form name="myForm" ng-controller="myController">
<label for="{{ course.courseName.name }}" ng-bind="course.courseName.title"></label>
<input id="{{ course.courseName.name }}" dynamic-input-name="course.courseName.name" ng-model="course.courseName.value" type="text" required />
<br />
<label for="{{ course.credits.name }}" ng-bind="course.credits.title"></label>
<input id="{{ course.credits.name }}" dynamic-input-name="course.credits.name" ng-model="course.credits.value" type="number" required />
<!-- Show that the values are bound. -->
<pre>course: {{course | json:' '}}</pre>
<!-- Show that the field is being registered with the ngFormController. -->
<pre>myForm.credits_field.$dirty: {{ myForm.credits_field.$dirty }}</pre>
</form>
</div>
使用Javascript
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
$scope.course = {
credits: {
title: 'Credits',
value: 100,
name: 'credits_field'
},
courseName: {
title: 'Course name',
value: 'Programming 201',
name: 'course_name_field'
}
};
}])
.directive('dynamicInputName', ['$compile', '$parse', function($compile, $parse){
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function(scope, elem) {
var name = $parse(elem.attr('dynamic-input-name'))(scope);
elem.removeAttr('dynamic-input-name');
elem.attr('name', name);
$compile(elem)(scope);
}
};
}]);
