How to change input type with angular

Question

I'we read some posts about using ng-switch or directive when changing and input type. I now have this code but it is very repetitive.

<input ng-change="change();" ng-if="! item.data && item.mapping == 'password'" 
type="password" class="login-input" id="{{item.mapping}}" 
ng-model="item.content" placeholder="{{item.name | mandatory:this.item.minLength }}"
ng-minlength="{{item.minLength}}"> 

<input ng-change="change();" ng-if="! item.data &&  item.mapping != 'password'"
type="text" class="login-input" id="{{item.mapping}}" ng-model="item.content"
placeholder="{{item.name | mandatory:this.item.minLength }}"
ng-minlength="{{item.minLength}}">

I only want to change the type. How can I make this less DRY with angular? How to use directives when changing the type?

Chandermani · Accepted Answer · 2013-12-23 08:05:43Z

1

If your attributes on input are similar then you can create a template out of this input field

<script id="others" type="ng/template">
    <input ng-change="change();" class="login-input" id="{{item.mapping}}" ng-model="item.content"
      placeholder="{{item.name | mandatory:this.item.minLength }}"
      ng-minlength="{{item.minLength}}"> 
</script>


<script id="password" type="ng/template">
    <input ng-change="change();" class="login-input" id="{{item.mapping}}" ng-model="item.content"
      placeholder="{{item.name | mandatory:this.item.minLength }}"
      ng-minlength="{{item.minLength}}"> 
</script>

and then use ng-include to add the input control to where ever you want

<ng-include src="item.mapping == 'password'?item.mapping:'others'"></ng-include>

You can pass data to the template to keep it reusable using ng-init.

Also remember ng-include creates a new scope.

edited Dec 23, 2013 at 8:05

answered Dec 23, 2013 at 8:00

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

4 Comments

Edgesoft Over a year ago

Is there some way of doing this without changing scope?

Chandermani Over a year ago

It does not change scope, but creates a child scope. Which means you can access parent scope. Look at this wiki to understand the implications github.com/angular/angular.js/wiki/Understanding-Scopes. Else you have to wrap this content into directive.

Edgesoft Over a year ago

Can you give me a push on how to create such direction?

Edgesoft Over a year ago

Isn't this ng/template very repetitive? I want to be able to have the same data and just switch the type. Must be alot of folks building dynamic forms but it doesn't seem to be a good solution to this.

Collectives™ on Stack Overflow

How to change input type with angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related