在 Angular 中使用占位符

Question

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

我想放置一个默认占位符 Risk，这是一个计算输入的输入，有时计算持续 2 秒，所以我想删除那个 Risk 占位符并在那里放一个 loader/spinner 。我就是这样

    <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 时， loader/spinner 出现，当它为假时， div 带有单词Win 出现。我想做同样的事情但不在那里，我想在输入中使用占位符 Risk，当 betLoader 为真时，隐藏风险字.

你有什么建议？

编辑

考虑到微调器与 class spinner 在 div 中。所以，我需要将该微调器放入输入中。

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>

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>

在 Angular 中使用占位符

Playing with placeholder in Angular

html

javascript

placeholder

angularjs

angularjs-interpolate