Empty the placeholder when using ng-model

Question

I'd like to create a text input linking it to a variable in the Scope. But I don't want the placeholder display anything. However the content of this variable in scope continues to shows. Why?

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

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'hello';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" placeholder="">
</body>

Angular places `$scope.hello` into the `` element value, nothing to do with the placeholder. Could you please be more specific. — Wtower, Mar 29 '16 at 08:52
I have a variable in the scope and I'd like to edit it. In this case I'd like to be able to change "hello" into "hello123456" with the input text — panagulis72, Mar 29 '16 at 08:54
Sorry, again totally unclear on why you seem not to be able to do it. — Wtower, Mar 29 '16 at 08:55
I can, but I can't clear the 'input' element on html page. I'd like that it contains nothing. Actually it shows the content of the $scope.hello — panagulis72, Mar 29 '16 at 09:01

score 0 · Answer 1 · answered Mar 29 '16 at 08:54

Because you bind the value of your input box to the variable 'hello' that exists on your scope, which also has the value 'hello'. The placeholder has nothing to do with it, the text that you see is the value of the input box. To clear the input box, set your scope variable to an empty string.

score 0 · Accepted Answer · answered Mar 29 '16 at 09:42

You have a variable in scope, called hello. You have an <input> element which is bound to the same variable. Inevitably, the element will have the same value of that variable.

As I understand from your comments, you wish the input element not to be bound to that variable. In this case, there are several alternatives. One for example is to have a separate variable in your scope.

Then you can use ngChange to update the first variable only if the input is changed, and thus maintain the initial value of it.

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

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'hello';
  $scope.field = '';
  $scope.change = function() {
    $scope.hello = $scope.field;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" ng-change="change()">
</body>

score 0 · Answer 3 · answered Aug 16 '17 at 06:23

0

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

Based on this post.

answered Aug 16 '17 at 06:23

AechoLiu

17,522
9
100
118

score -1 · Answer 4 · answered Mar 29 '16 at 08:56

-1

Put $scope.hello = '' or don't even initialize, It will get initialize by input tag, You can directly use it.

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

app.controller('MainCtrl', function($scope) {
  $scope.hello = '';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" placeholder="">
</body>

answered Mar 29 '16 at 08:56

mkkhedawat

1,687
2
17
34

But what if $scope.hello has already a value before to open the app? – panagulis72 Mar 29 '16 at 08:59
Whatever value you put to $scope.hello , It will shown there. If you want , not be shown , put $scope.hello to empty. – mkkhedawat Mar 29 '16 at 09:00
This is my question, if there are some way to clear the input type without set $scope.hello to empty – panagulis72 Mar 29 '16 at 09:03
Listen - value of 'hello' in ng-model is $scope.hello. that is why value shown in placeholder is shown whatever is stored in $scope.hello. You can change the variable name in ng-model. say ng-model="hello1". Now it won't show. It will show what is stored in $scope.hello1 and not $scope.hello – mkkhedawat Mar 29 '16 at 09:13

Empty the placeholder when using ng-model

4 Answers4