Estoy tratando de convertir un formulario que está usando .Net MVC para usar Angular. Estoy tratando de usar ng-repeat para producir los campos de entrada dentro del formulario. Que esto está funcionando como se esperaba. Pero, necesito seleccionar campos mezclados con los campos de entrada de texto.

¿Cómo hago para mezclar campos de texto y seleccionar campos dentro de un formulario usando ng-repeat? ¿Es posible? Soy nuevo en Angular también. Este código es solo un ejemplo muy rápido y se limpiará y estructurará adecuadamente.

<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>
3
anthonybetancourt 13 may. 2016 a las 20:50

3 respuestas

La mejor respuesta

Puede usar el ng-switch angular o ng-if para el tipo y agregar sus opciones de selección como una matriz en su objeto de formulario de esta manera:

https://jsfiddle.net/82u6gj26/

Angular

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>
3
Rob 13 may. 2016 a las 18:25

Si esto es posible

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

Use ng-if o ng-show a qué elemento mostrar

0
Jahirul Islam Bhuiyan 13 may. 2016 a las 18:09

Puede usar la directiva ng-if (https://docs.angularjs.org/api/ng / directive / ngIf).

Por ejemplo:

...
<div class="controls">
 <input ng-if="profile.type != 'select'">
 <select ng-if="profile.type == 'select'">
 </select>
</div>
...
0
Jan Robas 13 may. 2016 a las 18:08