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>

Answer 2

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>