[英]Angular ng-repeat with mixed elements
我正在尝试将使用.Net MVC的表单转换为使用Angular。 我正在尝试使用ng-repeat来生成表单中的输入字段。 这是按预期工作的。 但是,我需要选择与文本输入字段混合的字段。
如何使用ng-repeat混合文本字段并在一个表单中选择字段? 它甚至可能吗? 我也是Angular的新手。 此代码只是一个非常快速的示例,将被清理并正确结构化。
<div ng-app> <div ng-init="profiles = [ {id: 'first-name', label: 'First Name', type: 'text'}, {id: 'middle-name', label: 'Middle Name', type: 'text'}, {id: 'last-name', label: 'Last Address', type: 'text'}, {id: 'suffix', label: 'Suffix', type: 'text'}, {id: 'social-security-number', label: 'Social Security Number', type: 'text'}, {id: 'DateOfBirth1', label: 'Date of Birth', class: 'datePicker hasDatepicker valid', type: 'text'}, {id: 'years-in-school', label: 'Years in School', type: 'text'}, {id: 'marital-status', label: 'Marital Status', type: 'select'} ]"> <h2>Borrowers Information</h2> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <div ng-repeat="profile in profiles" class="control-group col-md-3"> <label class="control-label" for="{{profile.id}}">{{profile.label}}</label> <div class="controls"> <input data-val="true" data-val-required="Please enter a valid first name." id="{{profile.id}}" name="{{profile.id}}" value="" type="{{profile.type}}" class="{{profile.class}}"> </div> </div> </div> </div> <script>
您可以对类型使用角度ng-switch或ng-if,并将选择选项作为数组添加到表单对象中,如下所示:
https://jsfiddle.net/82u6gj26/
vm.person = {};
vm.form = [{
type:'text',
label:'First Name',
id:'first_name'
},
{
type:'select',
label:'Marital Status',
id:'marital_status',
options:[
{id:'Single',name:'Single'},
{id:'Married',name:'Married'}
]}
];
<div ng-repeat="form in ctrl.form">
<div class="form-group">
<label>{{form.label}}</label>
<div ng-switch="form.type">
<input
type="text"
ng-switch-when="text"
ng-model="ctrl.person[form.id]">
<select
ng-switch-when="select"
ng-model="ctrl.person[form.id]"
ng-options="s.id as s.name for s in form.options">
<option>Select One</option>
</select>
</div>
</div>
</div>
您可以使用ng-if指令( https://docs.angularjs.org/api/ng/directive/ngIf )。
例如:
...
<div class="controls">
<input ng-if="profile.type != 'select'">
<select ng-if="profile.type == 'select'">
</select>
</div>
...
是的,这可能,
<div ng-repeat="profile in profiles" class="control-group col-md-3">
<label class="control-label" for="{{profile.id}}">{{profile.label}}</label>
<div class="controls">
<input data-val="true" data-val-required="Please enter a valid first name." id="{{profile.id}}" name="{{profile.id}}" value="" type="{{profile.type}}" class="{{profile.class}}" ng-if="{{profile.type!='select'}}">
<select id="{{profile.id}}" name="{{profile.id}}" class="{{profile.class}}" ng-if="{{profile.type=='select'}}">
<option value="{{option.value}}" ng-repeat="option in profile.options">{{option.caption}}</option>
</select>
</div>
</div>
</div>
使用ng-if或ng-show来显示哪个元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.