CODEWITHSUNDEEP
javascripthtmlangularjs
Steve Sanders
Steve Sanders

Reputation: 8651

Setting input type="file" using AngularJS expression not working in Chrome

I am working on a form builder application in Angular and have run into an odd bug in Chrome. I am dynamically setting a form input type based on a variable. This seems to work for all input types except for "file", which will always change to "text" in Chrome. A simple example is below:

<div ng-app="app">
  <input type="{{'file'}}" /><br />
  <input type="{{'color'}}" /><br />
  <input type="{{'button'}}" value="button" />
</div>

jsfiddle

Upvotes: 0

Views: 1630

Answers (2)

Blackhole
Blackhole

Reputation: 20401

Indeed, it sounds like a bug, but you can easily bypass it using ngAttr:

<input ng-attr-type="{{'file'}}" />
<input ng-attr-type="{{'color'}}" />
<input ng-attr-type="{{'button'}}" value="button" />

Upvotes: 5

mpm
mpm

Reputation: 20155

I propose a basic version of ng-type directive : 

angular.module('ng').directive('ngType', function ($timeout) {
    return {
        scope: {
            ngType: "="
        },
        link: function ($scope, element, attr) {
            $scope.$watch('ngType', function (newValue, old) {
                element.attr('type', newValue);
            });
        }
    };
});

http://jsfiddle.net/camus/x649Q/2/

while the "bug" get fixed.

EDIT : blackhole answer is the right one.

Upvotes: 0

Related Questions