本文介绍了AngularJS:NG重复内NG-模式?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想生成纳克重复表单输入。
注:customFields'是字段名的数组:[时代,重量,种族]
< DIV CLASS =控制组NG重复=字段customFields>
<标签类=控制标签> {{}场}< /标签>
< DIV CLASS =控制>
<输入类型=文本NG模型=。person.customfields {{场}}/>
< / DIV>
< / DIV>
什么是设置'NG-模式的最好/正确的方法是什么?我想将它发送到服务器的 person.customfields.'fieldname其中字段名来自'领域customFields。
解决方案
< DIV NG-NG应用程序控制器=CTRL>
< DIV CLASS =控制组NG重复=字段customFields>
<标签类=控制标签> {{}场}< /标签>
< DIV CLASS =控制>
<输入类型=文本NG模型=person.customfields [现场]/>
< / DIV>
< / DIV>
<按钮NG点击=collectData()>收集< /按钮>
< / DIV>功能Ctrl($范围){
$ scope.customFields = [时代,重量,种族];
$ scope.person = {
customfields:{
时代:0,
重量:0,
种族:0
}
}; $ scope.collectData =功能(){
的console.log($ scope.person.customfields);
}
}
您可以尝试。
更新:
有关验证,关键是把< NG形式>
中继内。请。
I'm trying to generate form inputs with ng-repeat.Note: 'customFields' is an array of field names: ["Age", "Weight", "Ethnicity"].
<div class="control-group" ng-repeat="field in customFields">
<label class="control-label">{{field}}</label>
<div class="controls">
<input type="text" ng-model="person.customfields.{{field}}" />
</div>
</div>
What is the best/correct way to set 'ng-model'? I would like to send it to the server as person.customfields.'fieldname' where fieldname comes from 'field in customFields'.
解决方案
<div ng-app ng-controller="Ctrl">
<div class="control-group" ng-repeat="field in customFields">
<label class="control-label">{{field}}</label>
<div class="controls">
<input type="text" ng-model="person.customfields[field]" />
</div>
</div>
<button ng-click="collectData()">Collect</button>
</div>
function Ctrl($scope) {
$scope.customFields = ["Age", "Weight", "Ethnicity"];
$scope.person = {
customfields: {
"Age": 0,
"Weight": 0,
"Ethnicity": 0
}
};
$scope.collectData = function () {
console.log($scope.person.customfields);
}
}
You can try it here.
Updated:
For the validation, the trick is to put <ng-form>
inside the repeater. Please try.
这篇关于AngularJS:NG重复内NG-模式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!