angularjs 通过指令和 ng-repeat 传递参数 [英] angularjs passing parameters through directive and ng-repeat
问题描述
我们再试一次:
这是一个工作的plunker:http://plnkr.co/edit/RTrdsLY8ONoeDLPYSFJi?p=preview
但是这些字段是相互连接的.
当您查看 DOM 时:
<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="fieldName" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="">^^^^^^^^^^^
当然!都有 name="fieldName"!
但是为什么!?应该是名字、姓氏和年龄!
是的,formField.html 模板有错误:
<input class="form-control" type="{{fieldType}}" name="fieldName" ng-model="fieldName" ng-minlength=3 ng-maxlength=20 required/>^^^^^^^^^^^^
所以让我们把它改成{{fieldName}}.因此,所有出现的 form.fieldName... 都变成了 form.{{fieldName}}.
嗯,红框去哪儿了?
让我们看看 DOM -
<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="first_name" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="">
name 没问题,但现在 has-error 不起作用...
更新:您可以使用这样的函数从模型中获取您的参数.(根据您的数据结构)
另一个分叉的plunker:http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview
$scope.getModels = function(items) {无功参数 = {};如果(angular.isArray(项目)){for (var i = 0; i < items.length; i++) {var item = items[i];if(angular.isArray(item.fields)) {for (var j = 0; j
<小时>
由于尚未实现动态输入名称(此处为相关 PR),我插入了一个嵌套的 ng-form
用于验证.正因为如此,我认为您必须使用 ngModel
自己管理表单提交.
在这里检查分叉的例子:http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=预览
模板:
<div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$无效]"><label class="control-label col-sm-2" for="fieldName">{{fieldLabel}}</label><div class="col-sm-6"><input class="form-control" type="{{fieldType}}" placeholder="输入有效名称" name="fieldName" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 required/><span class="help-block"><span ng-show="form.fieldName.$error.required">必填字段</span><span ng-show="form.fieldName.$error.minlength">字符太少 - min 是 (6)</span><span ng-show="form.fieldName.$error.maxlength">字符过多 - 最大为 (20)</span> </span>
HTML:
</表单域>
JS:
KPNDirectives.directive("formField", function () {返回 {限制:'E',范围: {字段模型:'=ngModel',字段类型:'=',字段标签:'=',字段名称:'='},templateUrl: 'formField.html'};});
Let's try again:
here's a working plunker: http://plnkr.co/edit/RTrdsLY8ONoeDLPYSFJi?p=preview
But the fields are connected each other.
when you look at DOM:
<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="fieldName" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="">
^^^^^^^^^^
of course! All have name="fieldName"!
But why!? it should be first_name, last_name and age!
Yes, there's a mistake in formField.html template:
<input class="form-control" type="{{fieldType}}" name="fieldName" ng-model="fieldName" ng-minlength=3 ng-maxlength=20 required/>
^^^^^^^^^^^
So let's change it into {{fieldName}}. And consequently all occurences of form.fieldName... into form.{{fieldName}}.
Well, where's gone red frame?
Let's look at DOM -
<input class="form-control ng-pristine ng-valid-maxlength ng-valid-minlength ng-valid ng-valid-required" type="text" name="first_name" ng-model="fieldName" ng-minlength="3" ng-maxlength="20" required="">
name is ok, but now has-error doesn't work...
Update: You can use a function like this to fetch your params from model. (accroding to your data structure)
Another forked plunker: http://plnkr.co/edit/mdKBoEffoUo2ilH7Jd3L?p=preview
$scope.getModels = function(items) {
var params = {};
if (angular.isArray(items)) {
for (var i = 0; i < items.length; i++) {
var item = items[i];
if(angular.isArray(item.fields)) {
for (var j = 0; j < item.fields.length; j++) {
var field = item.fields[j];
params[field.id] = field.model;
}
}
}
}
alert(JSON.stringify(params, '', 4));
};
Since dynamic input name hasn't been implemented yet (Relatived PR here), I inserted a nested ng-form
for validation. And because that, I think you have to manage form submittion yourself by using ngModel
.
Check the forked exmaple here: http://plnkr.co/edit/8cP5YMKUGu6LfBCsRxAZ?p=preview
Template:
<div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$invalid]">
<label class="control-label col-sm-2" for="fieldName">{{fieldLabel}}</label>
<div class="col-sm-6">
<input class="form-control" type="{{fieldType}}" placeholder="enter valid name" name="fieldName" ng-model="fieldModel" ng-minlength=3 ng-maxlength=20 required/>
<span class="help-block">
<span ng-show="form.fieldName.$error.required">Required field</span>
<span ng-show="form.fieldName.$error.minlength">Too few chars - min is (6)</span>
<span ng-show="form.fieldName.$error.maxlength">Too much chars - max is (20)</span>
</span>
</div>
</div>
HTML:
<form-field ng-repeat="field in tabItem.fields" ng-model='field.model'
field-type="field.type" field-name='field.id' field-label='field.label'>
</form-field>
JS:
KPNDirectives.directive("formField", function () {
return {
restrict: 'E',
scope: {
fieldModel: '=ngModel',
fieldType: '=',
fieldLabel: '=',
fieldName: '='
},
templateUrl: 'formField.html'
};
});
这篇关于angularjs 通过指令和 ng-repeat 传递参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!