How do I set input type based on variable in angularjs?

Question

How do I set up an input type based on another variable? (My initial thought was to have) the directive trigger from the onclick event, which should set the input type. I thought about using a directive but not sure

FIRST

//loop
<a class="orgTitle" id="@c.Id" data-ng-click="selectQuestion(@c.Id, @c.SelectionTypeId);" style="cursor:pointer">@c.ProgramName</a>

THEN

$scope.selectQuestion = function(id, selectionTypeId) {//call returns data and push to QuestionList}

FINALLY

<div data-ng-repeat="question in angularPage.QuestionList">
<span>{{question.Question}}</span><br/>
<span>//directive to get my answer type, whether radiobutton or textbox</span>

You can't set/change input type dynamically. You need to use ng-switch or similar directive to render different input field depending on dynamic value. — Stewie
– Stewie, Commented Nov 26, 2013 at 17:47
IE doesn't allow it, so Angular succumbs to it in order to stay cross-browser compatible. — Stewie
– Stewie, Commented Nov 26, 2013 at 17:58
@MrM if I get it right in your case the type will not be change dynamically. ng-repeat on its own recreates DOM structure when changes happen. — artur grzesiak
– artur grzesiak, Commented Nov 26, 2013 at 18:52
so would I be able to create an input element with ng-repeat at least? @arturgrzesiak — MrM
– MrM, Commented Nov 26, 2013 at 19:32

angabriel · Accepted Answer · 2013-11-26 18:10:03Z

2

Try writing a directive like this: Pseudo-Code, this was not tested!

angular.module('inputType', [])
  .directive('inputType', function (/**injects here*/) {
    return {
      restrict: 'A',
      scope: false,
      link: function (scope, element, attr) {
        var inputType = scope.$eval(attr.inputType);
        element.attr('type', inputType);
      }
  })
});

Then in html:

<input input-type="myDynamicInputType" />

answered Nov 26, 2013 at 18:10

angabriel

5,0582 gold badges37 silver badges37 bronze badges

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

Comments

MrM · Accepted Answer · 2013-11-26 21:28:20Z

0

I... I mean, we figured it out! Because jquery restricts the type property change, I did an append on the html input type.

HTML

<input-type question-type="question.myDynamicInputType" />

js

.directive('inputType', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            $(element).append('<input type="' + scope.$eval(attr.inputType) + '" />');
        }
    }
});

element

<input-type question-type="question.myDynamicInputType">
    <input type="number">
</input-type>

Thanks for your help guys!

answered Nov 26, 2013 at 21:28

MrM

22.1k31 gold badges117 silver badges142 bronze badges

1 Comment

angabriel Over a year ago

if some answer helped you, please mark it as answered. People are looking for the green checkmark ;)

Collectives™ on Stack Overflow

How do I set input type based on variable in angularjs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related