3

是否有一种 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加载器/微调器时出现，当它为假时，出现Windiv一词。我想做同样的事情，但不是在那里，我想在输入中使用占位符Risk，当为真时，然后隐藏Risk词。betLoader

你有什么建议？

编辑

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

4

2 回答 2

8

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

标记

<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>
于 2015-06-19T17:00:58.290 回答
2

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

实现的好处ng-placeholder是，如果您的页面加载需要时间，您将不会看到 plain{{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>

于 2015-06-19T17:11:02.093 回答