在 Angular 中使用占位符

Question

有没有像ng占位符或类似的东西？

我想放一个默认占位符，它是 Risk ，即用于作为计算输入的输入，有时计算持续 2 秒，所以我想删除该Risk占位符并在那里放置一个加载器/微调器。这就是我的方式

    <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时，加载器/微调器出现，当它是假的时，div带有 Win 一词的出现。我想做同样的事情，但不存在，我想在带有占位符 Risk 的输入中做，当betLoader为真时，然后隐藏风险词。

你有什么建议？

编辑

考虑到微调器与类spinner处于div中。因此，我需要将该微调器放在输入中。

Answer 1

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

标记

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

更新

若要更新微调器内容，可以在此处使用ng-bind-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

没有内置的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>