Angular ng-repeat 与混合元素答案

【问题标题】：Angular ng-repeat with mixed elementsAngular ng-repeat 与混合元素
【发布时间】：2016-09-10 00:39:31
【问题描述】：

我正在尝试将使用 .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>

【问题讨论】：

标签： javascript .net angularjs asp.net-mvc

【解决方案1】：

您可以使用角度 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'}
    ]}
];

HTML

<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>

【讨论】：

【解决方案2】：

您可以使用 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>
...

【讨论】：

【解决方案3】：

是的，这可能，

    <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 显示到哪个元素

【讨论】：