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.

Answer 1

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>