在Angular中玩转占位符

Question

是否有类似ng-placeholder的东西或类似的东西？

我想放置一个默认的占位符，它是“风险”，用于计算输入，有时计算需要2秒钟，所以我想删除该“风险”占位符并在那里放置一个加载器/旋转器。这就是我的做法。

    <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>

我有一个名为$scope的变量betLoader，当它为true时，会出现加载器/旋转图案，当它为false时，div中会出现Win这个词。我想做同样的事情，但不是在那里，我想在占位符Risk的输入框中实现，当betLoader为true时，隐藏Risk这个词。

你有什么建议吗？

编辑

请注意，旋转图案位于具有类spinner的div中。因此，我需要将该旋转图案放在输入框内。

- Non

---

没有 ng-placeholder，但有一个 placeholder="{{bindHere}}"... - Piper McCorkle

好的，但是我该怎么做呢？我想把Risk这个词作为默认占位符，那么当betLoader为false时，风险如何出现？@mypal125 - Non

Answer 1

您可以直接在占位符属性中使用插值{{}}指令。

标记

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

更新

要更新旋转器内容，您可以使用ng-bind-html。

Html

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

- Pankaj Parkar

---

是的，但看看这一行：<span ng-show="betLoader"><div class="spinner"></div></span>我需要放入那个占位符的是类似于spinner类的东西。那个类就是包含旋转器的那个类。 - Non

@NietzscheProgrammer 如果你想有条件地检查添加 spinner div 和 Win 文本，那么你可以在这种情况下简单地使用 ng-bind-html。看看我的编辑... - Pankaj Parkar

Answer 2

没有内置的ng-placeholder指令，您可以使用常规的placeholder与{{scopeParam}}或者实现ng-directive

实现ng-placeholder的优势在于，如果页面加载需要时间，您不会看到{{scopeParam}}作为输入框的占位符

实现非常简单:

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>

- Yaron U.