Angularjs: change input type Dynamically

Question

I have a list which sometimes has true or false value. When I'm using ng-repeat to show the list with the value inside an <input type="text"> , I'd like to have <input type="checkbox"> if the value matches a boolean.

<table class="table table-hover table-striped table-bordered">
    <tbody>
        <tr ng-repeat="parameter in parameter_list">
            <th class="text-left">
                {{parameter.title | uppercase}}
            </th>
            <td class="text-left">
              <div class="form-group">
                <input type="text" ng-model="parameter_list[$index].value" class="form-control">
              </div>
            </td>
        </tr>
    </tbody>
</table>

Any ideas, how can I achieve this ?

Fiddle

Edit : It's not a duplicate since I don't have the input type in a $scope variable.

You may need to convey this "The problem with this is that I don't have the input type in a $scope variable." some where in your post which saves from Duplicates issue for sure — Prasad
– Prasad, Commented Mar 8, 2016 at 9:18

Oscar Bout · Accepted Answer · 2016-03-08 08:27:41Z

16

Just keep it simple:

<input type="{{typeInput}}" />

And in your controller:

$scope.typeInput = 'number';

Works like a charm, without all that extra code

answered Mar 8, 2016 at 8:27

Oscar Bout

6805 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AshBringer Over a year ago

The problem with this is that I don't have the input type in a $scope variable.

Mohammed Aslam Over a year ago

this wont work with ng-model i guess, after type and input data change the model will get undefined

Kishor Over a year ago

Works superbly -

<input class="form-row-input" ng-model="vm.user.password" type="{{vm.typeInput}}" name="pass"/>  CHECK BOX to enable / disable - <input type="checkbox" ng-model="vm.showPassword"/>  In Controller - $scope.$watch('vm.showPassword',function(newVal){                 if(newVal) {                     vm.typeInput = 'text';                 }                 else {                     vm.typeInput = 'password';                 }             });

rolinger Over a year ago

I did the same method, in chrome inspector I am not seeing the input type change from text to tel. The controller console.log shows the type output changing from text to tel, but its not reflecting so in the DOM.

Community · Accepted Answer · 2017-05-23 12:10:06Z

I would recommend more generic approach. First of all if you want to differentiate your inputs by type you need to declare some type checking function in your controller:

$scope.getType = function(x){
    return Object.prototype.toString.call(x);
}

You need to do this because it's impossible to do this in the expression - see: How to get a type of scope variable in Angular expression?

Then in your view you can use ng-if directive to show different controls depending on the type of the field. This is example expression for booleans:

ng-if="getType(parameter_list[$index].value) == '[object Boolean]'"

You should also define your booleans correctly, not "true"/"false" but true/false:

{
        "title": "differed",
        "value": true
}

Finally the code of your example would look as follows.

View:

<div ng-controller="MainCtrl" class="container">
        <div>
          <table class="table table-hover table-striped table-bordered">
            <tbody>
                <tr ng-repeat="parameter in parameter_list">
                    <th class="text-left">
                        {{parameter.title | uppercase}}
                    </th>
                    <td class="text-left">
                      <div class="form-group" ng-if="getType(parameter_list[$index].value) != '[object Boolean]'">
                        <input type="text" ng-model="parameter_list[$index].value" class="form-control">
                      </div>
                      <div class="form-group checkbox" ng-if="getType(parameter_list[$index].value) == '[object Boolean]'">
                        <label><input type="checkbox" ng-model="parameter_list[$index].value">{{ parameter_list[$index].title }} </label>
                    </div>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
</div>

Controller:

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

mymodal.controller('MainCtrl', function ($scope) {
  $scope.getType = function(x){
    return Object.prototype.toString.call(x);
  }

    $scope.parameter_list = [
    {
        "title": "name",
        "value": "Product3"
    },
    {
        "title": "version",
        "value": "01.00.00"
    },
    {
        "title": "inventory_name",
        "value": "Product3"
    },
    {
        "title": "inventory_version",
        "value": "01.00.00"
    },
    {
        "title": "differed",
        "value": true
    },
    {
        "title": "differed_name",
        "value": "whatever"
    },
    {
        "title": "accept_error_while_reboot",
        "value": false
    },
    {
        "title": "setup",
        "value": ""
    },
    {
        "title": "ggg",
        "value": "setup.exe"
    },
    {
        "title": "fx",
        "value": "test"
    },
    {
        "title": "gx",
        "value": "setup.exe"
    },
    {
        "title": "tx",
        "value": "setup.exe"
    }
]
  });

Here you can find JSFiddle: http://jsfiddle.net/57qhsqwf/2/

Theo Itzaris · Accepted Answer · 2016-03-08 08:56:16Z

I updated your jsfiddle : http://jsfiddle.net/tornado1979/jp5rcm8j/2/

I use ng-show directive to check when the value is tru or false and create dynamically checkbox that could be checked or not.

<input ng-show="parameter_list[$index].value !=true && parameter_list[$index].value !=false" type="text" ng-model="parameter_list[$index].value" class="form-control">

<input ng-show="parameter_list[$index].value==true || parameter_list[$index].value==false" type="checkbox" ng-model="parameter_list[$index].value" class="form-control">

1. There is a problem though with the 'setup' property, you left it empty so the angular reads it as false and creates a checkbox. Could you just add a value different than null? That would solve the problem completely.

2. i changed your 'true' and 'false' values to true and false without the ' symbol , for the angular to understand that is boolean and not string value.

Hope helps ,good luck.

hurricane · Accepted Answer · 2016-03-08 08:59:06Z

2

Simply you can define ngShow and ngHide.

FIDDLE

EDIT FIDDLE

If you want to use show;

<div class="form-group">
    <input type="checkbox" ng-show="parameter_list[$index].value==false || parameter_list[$index].value==true " ng-model="parameter_list[$index].value" class="form-control">
    <input type="text" ng-show="parameter_list[$index].value!=false && parameter_list[$index].value!=true " ng-model="parameter_list[$index].value" class="form-control">
</div>

Or you can send object with isChecked value.

<div class="form-group">
    <input type="checkbox" ng-show="parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control">
    <input type="text" ng-show="!parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control">
</div>

edited Mar 8, 2016 at 8:59

answered Mar 8, 2016 at 8:19

hurricane

6,7342 gold badges38 silver badges45 bronze badges

7 Comments

hurricane Over a year ago

@BipBip if you don't want to set other input you can use ngInıt to.

hurricane Over a year ago

@BipBip "value": "true" is a string :)

AshBringer Over a year ago

I just noticed actually when I click the checkbox, it's getting back to text, which is normal jsfiddle.net/eynvqnL6. How can we solve it ?

hurricane Over a year ago

@BipBip You have two option. 1. Send data with boolean not string. Or 2. filter data with string or boolean like value=='false' OR value=='false' OR value=='true' OR value==false OR value==true

AshBringer Over a year ago

Can you make a fiddle please ?

|

Cowwando · Accepted Answer · 2016-03-08 08:20:26Z

1

You can use ng-switch to achieve your goal according to the value of the property that is either true or false!

<table class="table table-hover table-striped table-bordered">
<tbody>
    <tr ng-repeat="parameter in parameter_list">
        <th class="text-left">
            {{parameter.title | uppercase}}
        </th>
        <td class="text-left">
          <div class="form-group" ng-switch="parameter_list[$index].value">
            <input type="text" ng-model="parameter_list[$index].value" class="form-control" ng-switch-when="true">

Cheers! :)

answered Mar 8, 2016 at 8:20

Cowwando

4605 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angularjs: change input type Dynamically

5 Answers 5

4 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related