我有这个表单:http://jsfiddle.net/dfJeN/
如您所见,输入的name值是静态设置的:
name="username"
,表单验证工作正常(添加一些内容并从输入中删除所有文本,必须显示一个文本)。
然后,我尝试动态设置Name值:http://jsfiddle.net/jNWB8/
name="{input.name}"
然后我将这个应用到我的验证中
login.{{input.name}}.$error.required
(此模式将在ng-repeat中使用),但我的表单验证失败了。它可以在我的浏览器中正确地解释(如果我检查了我看到的login.username.$error.required元素)。
有什么想法吗?
编辑:在控制台中记录作用域之后,
{{input.name}}
表达式不是插值表达式。我的表单是{{input.name}}属性,但没有用户名。
更新:从1.3.0-rc.3开始,name="{{input.name}}“正常工作,请查看#1404
发布于 2013-01-17 21:04:10
你不能用这种方式做你想做的事情。
假设您正在尝试做的是需要动态地向表单添加元素,使用类似于ng-repeat的东西,您需要使用嵌套ng-form来允许对这些单独的项进行验证:
<form name="outerForm">
<div ng-repeat="item in items">
<ng-form name="innerForm">
<input type="text" name="foo" ng-model="item.foo" />
<span ng-show="innerForm.foo.$error.required">required</span>
</ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>
遗憾的是,这并不是Angular的一个有据可查的特性。
发布于 2014-01-25 00:18:46
使用嵌套的ngForm允许您从HTML模板中访问特定的InputController。但是,如果您希望从另一个控制器访问它,它不会有任何帮助。
例如:
<script>
function OuterController($scope) {
$scope.inputName = 'dynamicName';
$scope.doStuff = function() {
console.log($scope.formName.dynamicName); // undefined
console.log($scope.formName.staticName); // InputController
}
}
</script>
<div controller='OuterController'>
<form name='myForm'>
<input name='{{ inputName }}' />
<input name='staticName' />
</form>
<a ng-click='doStuff()'>Click</a>
</div>
我使用这个指令来帮助解决这个问题:
angular.module('test').directive('dynamicName', function($compile, $parse) {
return {
restrict: 'A',
terminal: true,
priority: 100000,
link: function(scope, elem) {
var name = $parse(elem.attr('dynamic-name'))(scope);
// $interpolate() will support things like 'skill'+skill.id where parse will not
elem.removeAttr('dynamic-name');
elem.attr('name', name);
$compile(elem)(scope);
}
};
});
现在,只要“dynamic -name”属性而不是“name”属性,就可以在需要的地方使用动态名称。
例如:
<script>
function OuterController($scope) {
$scope.inputName = 'dynamicName';
$scope.doStuff = function() {
console.log($scope.formName.dynamicName); // InputController
console.log($scope.formName.staticName); // InputController
}
}
</script>
<div controller='OuterController'>
<form name='myForm'>
<input dynamic-name='inputName' />
<input name='staticName' />
</form>
<a ng-click='doStuff()'>Click</a>
</div>
发布于 2014-04-14 23:57:38
根据Github上的讨论,这个问题应该在AngularJS 1.3中得到解决。
同时,这里有一个由@caitp和@Thinkscape创建的临时解决方案
// Workaround for bug #1404
// https://github.com/angular/angular.js/issues/1404
// Source: http://plnkr.co/edit/hSMzWC?p=preview
app.config(['$provide', function($provide) {
$provide.decorator('ngModelDirective', function($delegate) {
var ngModel = $delegate[0], controller = ngModel.controller;
ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
var $interpolate = $injector.get('$interpolate');
attrs.$set('name', $interpolate(attrs.name || '')(scope));
$injector.invoke(controller, this, {
'$scope': scope,
'$element': element,
'$attrs': attrs
});
}];
return $delegate;
});
$provide.decorator('formDirective', function($delegate) {
var form = $delegate[0], controller = form.controller;
form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
var $interpolate = $injector.get('$interpolate');
attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope));
$injector.invoke(controller, this, {
'$scope': scope,
'$element': element,
'$attrs': attrs
});
}];
return $delegate;
});
}]);
JSFiddle上的演示。
https://stackoverflow.com/questions/14378401
复制相似问题