setting up input type within ng-repeat

Question

I have a list of list of input fields in options. Now, I am adding these input fields to my page using ng-repeat.

<input type="text">

I have their input types in the same options object which is repeating. These types are like this: String, Varchar, etc.

Now, I want to set type of input field according to the parameter type i have.

Here is what i want to do

<tr ng-repeat = "option in options">
<td><input type="text" ></td>
</tr>

I have a parameter named option.Paramtype which contains type of each input field. I want to set the type of input field as number if it is Int and so on.

Please help.

Alexander Staroselsky · Accepted Answer · 2015-07-02 17:38:48Z

Given you have a array of options such as:

options = [
  {Paramtype:'String', foo:25, bar:'Unicorn'},
  {Paramtype:'int', foo:30, bar:'Kitten'},
  {Paramtype:'Email', foo:28, bar:'Dragon'},
  {Paramtype:'Date', foo:15, bar:'Kanye'}
]

Within your ng-repeat block you could use ng-if to check the Paramtype property and set the input type accordingly. Like so:

<tr ng-repeat = "option in options">
    <td>
        <input ng-if="option.Paramtype == 'String'" type="text">
        <input ng-if="option.Paramtype == 'int'" type="number">
        <input ng-if="option.Paramtype == 'Email'" type="email">
    </td>
</tr>

Hopefully that helps

Otherwise if you could put an additional parameter into each element in your options array you could fill the input type using angular binding.

options = [
  {Paramtype:'String', inputType:'text', bar:'Unicorn'},
  {Paramtype:'int', inputType:'number', bar:'Kitten'},
  {Paramtype:'Email', inputType:'email', bar:'Dragon'},
  {Paramtype:'Date', inputType:'datetime', bar:'Kanye'}
]

<table>
    <tr ng-repeat = "option in options">
      <td><input type="{{option.inputType}}"></td>
    </tr>
</table>

The ng-switch directive was created exactly for the use case described in your answer.
Are you implying that you would want one and only one input for the whole options array? Or do you want an input tag to generate for each option in the options array? In my example there are 4 options in the options array, one input element for each option that matches the ng-if statement. plnkr.co/edit/Q9gF9zaVbuORIwAXvEHS?p=preview

Pankaj Parkar · Accepted Answer · 2015-07-02 18:51:23Z

I'd simply suggest you to use ng-attr directive to set the value of type attribute dynamically, In order to make your implementation more cleaner, you should maintain one object that will have mapping of What Paramtype would be what input Type. Then we could use mappingOfTypes variable with its index to populate the type attribute value of input field.

Markup

<tr ng-repeat = "option in options">
    <td><input ng-attr-type="{{mappingOfTypes[option.Paramtype]}}" ></td>
</tr>

Controller

$scope.mappingOfTypes = ["String": "text", "Int": 'number'];

Collectives™ on Stack Overflow

setting up input type within ng-repeat

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related