Change the type input dynamically

Question

Hello I have a strange question. I have to create a form but the fields are different for every user so they could be a or . I tried with angular to do something like that

<div ng-controller="myCtrl" ng-repeat="x in prova">
    <input type = "{{x}}">
</div>

And a controller like this

app.controller('controller',['$scope', function($scope){
    $scope.prova = [
        'text',
        'check-box'    
    ]
});

But as I thought it doesn't work.

Thank you for your help.

It should be working fine. Please check view source after publishing form — Naveed Ramzan, Dec 15 '16 at 16:18
May not work in IE http://stackoverflow.com/questions/2566394/changing-the-input-type-in-ie-with-javascript — Naghaveer R, Dec 15 '16 at 16:19
The ng-repeat give me just 2 input text. It should give me one input text and one check-box. I'm working on firefox — Daveus, Dec 15 '16 at 16:24
Get rid of the dash on `check-box` in $scope.prova and it will work fine. I don't know if you intentionally added that dash or not. If it is intentional, go with ecstacks answer. — KreepN, Dec 15 '16 at 16:30
For security reasons, changing the type of an input is not dynamically allowed. Imagine switching from password to input and stealing information. Having two inputs in the HTML, with ng-if or ng-switch deciding which to show in the DOM is the way to go. — Artem K., Dec 15 '16 at 17:43

score 2 · Accepted Answer · answered Dec 15 '16 at 16:23

You can use the ng-switch directive to only render the correct input type when its type matches x.

<div ng-controller="myCtrl" ng-repeat="x in prova" ng-switch="x">
<input type="text" ng-switch-when="text">
<input type="checkbox" ng-switch-when="check-box">
<textarea ng-switch-when="textarea"></textarea>
</div>

More info: https://docs.angularjs.org/api/ng/directive/ngSwitch

score 0 · Answer 2 · answered Dec 15 '16 at 16:23

0

You missed the closing square bracket of dependency injection. This would work.

app.controller('controller',['$scope', function($scope){
      $scope.prova=[
        'text',
        'check-box'    
      ]
}]);

answered Dec 15 '16 at 16:23

Sai M.

2,548
4
29
46

score 0 · Answer 3 · answered Dec 15 '16 at 16:35

plunkr included

It works for me. Here is a very simple example in plunkr that mimic's your code.

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.arrTypes = ['submit', 'text', 'button', 'password', 'month'];
});

and in the index.html...:

<div ng-repeat = "inpType in arrTypes">

    <input type={{inpType}} name="" id="" value={{inpType}} />
</div>

score 0 · Answer 4 · answered Dec 16 '16 at 09:06

Some code Changes :

replace check-box with checkbox.
replace controller with myCtrl in the controller function.

Working demo :

Controller :

var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl', function($scope) {
    $scope.prova = [
        "text",
        "checkbox"    
    ]
});

View :

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in prova">
    <input type = "{{x}}">
</div>
</div>

Change the type input dynamically

4 Answers4