Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change value of input placeholder via model?

Tags:

angularjs

pug

I'm trying to change the value of the input placeholder from a controller but cant quite figure out how.

input(type='text', ng-model='inputText', side='30', placeholder='enter username') 

Is there a way to modify a model's element attributes?

like image 972
Jonah Katz Avatar asked Jul 18 '13 01:07

Jonah Katz


People also ask

How do you change the input placeholder?

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.

Can you change placeholder text with CSS?

Change Input Placeholder Text with CSSYou can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background.

How do I change a dynamic placeholder?

A placeholder is meant to describe the generic pattern of expected input, not some specific value. If you have a useful default value e.g. from previous input, make it the default by putting it into the value attribute (property) and omit the placeholder attribute as not needed.

How do you target a placeholder in JavaScript?

To change the placeholder text of an input element with JavaScript, we can set the placeholder property of an element. Then we can set the placeholder attribute value for each input element by writing: document. getElementsByName('Email')[0].


2 Answers

The accepted answer still threw a Javascript error in IE for me (for Angular 1.2 at least). It is a bug but the workaround is to use ngAttr detailed on https://docs.angularjs.org/guide/interpolation

<input type="text" ng-model="inputText" ng-attr-placeholder="{{somePlaceholder}}" /> 

Issue: https://github.com/angular/angular.js/issues/5025

like image 36
ysub Avatar answered Sep 24 '22 05:09

ysub


You can bind with a variable in the controller:

<input type="text" ng-model="inputText" placeholder="{{somePlaceholder}}" /> 

In the controller:

$scope.somePlaceholder = 'abc'; 
like image 105
Wagner Francisco Avatar answered Sep 24 '22 05:09

Wagner Francisco