Playing with placeholder in Angular

Question

Is there like a kind of ng-placeholder or something similar ?

I want to put a default placeholder which is Risk, that is for an input which is a calculation input, sometimes the calculation last 2 seconds, so I want to remove that Risk placeholder and put a loader/spinner there. This is how I have it

    <div>

      <div>
        <span ng-show="betLoader"><div class="spinner"></div></span>
        <div ng-show="!betLoader">Win</div>
      </div>

      <input placeholder="Risk"
             ng-model="parlayData.win">
    </div>

I have there a $scope variable betLoader, when it is true the loader/spinner appears, when it is false, div with the word Win appears. I want to do the same but not there, I want to do it in the input with the placeholder Risk, when betLoader is true, then hide the Risk word.

What are your suggestions ?

EDIT

take into account that the spinner is in a div with the class spinner. So, I need to put that spinner within the input.

There's not an `ng-placeholder`, but there's a `placeholder="{{bindHere}}"`... — Piper McCorkle, Jun 19 '15 at 16:59
OK, but how I do that ? I want to put ```Risk``` word as a default placeholder, so, when betLoader is false, how risk come up ? @mypal125 — Non, Jun 19 '15 at 17:01

Pankaj Parkar · Accepted Answer · 2015-06-19T17:12:26.643

8

You could directly use interpolation {{}} directive directly in placeholder attribute.

Markup

<input placeholder="{{betLoader ? 'Risk': ''}}" ng-model="parlayData.win">

Update

To update spinner content you could use ng-bind-html there.

Html

  <div>
    <div ng-bind-html="betLoader ? '<span class="spinner"></span>': 'Win'"><div class="spinner"></div></span>
    <div ng-show="!betLoader">Win</div>
  </div>

edited Jun 19 '15 at 17:12

answered Jun 19 '15 at 17:00

Pankaj Parkar

134,766
23
234
299

Yes, but look at this line: ```
``` what I need to put into that placeholder is something like the spinner class. That class is the one which contains the spinner. – Non Jun 19 '15 at 17:05
@NietzscheProgrammer you want to conditionally check add `spinner` div and `Win` text then you could simply use `ng-bind-html` in that case. Look at my edit.. – Pankaj Parkar Jun 19 '15 at 17:14

score 2 · Answer 2 · answered Jun 19 '15 at 17:11

There is no builtin ng-placeholder directive, you can use regular placeholder with {{scopeParam}} or just implement the ng-directive

The advantage of implementing the ng-placeholder is that if it takes time for your page to load, you wont see plain {{scopeParam}} as the placeholder of your input

The implementation is very simple:

angular.module('ph', [])
//directive starts here
  .directive('ngPlaceholder', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.attr("placeholder",attrs.ngPlaceholder);
      }
    };
  })
//directive ends here

  .controller("phCtrl", function($scope){
    $scope.ph="The placeholder"
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="ph" ng-controller="phCtrl">
  <input type="text" ng-placeholder="{{ph}}" />
</div>

Playing with placeholder in Angular

2 Answers2