在 Angular 中使用占位符

Posted 2023-03-05

【中文标题】在 Angular 中使用占位符

【英文标题】：Playing with placeholder in Angular

【发布时间】：2015-09-05 17:59:37

【问题描述】：

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

我想放置一个默认占位符 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时，加载器/微调器出现，当它为false时，div出现Win字样。我想做同样的事情但不在那里，我想在输入中使用占位符 Risk，当betLoader 为真时，然后隐藏 Risk 词。

你有什么建议？

编辑

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

【问题讨论】：

没有ng-placeholder，但有placeholder="bindHere"...

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

【参考方案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>

【讨论】：

是的，但是看看这一行：<span ng-show="betLoader"><div class="spinner"></div></span> 我需要在占位符中放入类似于 spinner 类的东西。该类是包含微调器的类。

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

【参考方案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>