Question

我附加了ng-model，但是我想显示一个默认的占位符值，如果它没有被触及（$pristine）。有什么好办法吗？我不能简单地在初始阶段将我的ng-model值设置为null。这是我的傻瓜： http://plnkr.co/edit/0kzKrwKTbJzsMGG8D1gQ?p=preview

<body ng-controller="inputController">
    <input type="number" id="pricefield" min="0" name="price" placeholder="Price" ng-model="test.value" required/>

</body>

angular.module('plunker', []);
function inputController($scope) {
  $scope.test = {value: 0};
}

Answer 1

您可以使用ng-attr指令动态设置占位符值，检查表单元素是否为pristine，您需要将此字段放在form＆amp;然后，您可以轻松检查该表单元素的$pristine属性，如myForm.price.$pristine。

<强>标记

<form name="myForm">
  <input type="number" id="pricefield" min="0" name="price" ng-model="test.value" 
   ng-attr-placeholder="{{myForm.price.$pristine ? 'Some Value': 'Default Value'}}" required/>
</form>

Demo Plunkr

<强>更新

我建议有一个更改的指令在初始加载时隐藏$viewValue＆amp;将显示占位符。使用$formatters

上的ngModelControlller，指令将使控制器超出显示值

<强>标记

<input type="number" custom-dir id="pricefield" min="0" name="price" 
ng-attr-placeholder="{{myForm.price.$pristine ? 'Initial Placeholder': 'After change Placeholder'}}" 
ng-model="test.value" required/>

<强>指令

app.directive('hideInitialLoad', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      var initalHide = true;
      //format text going to user (model to view)
      ngModel.$formatters.push(function(value) {
        console.log(attr.min > value)
        if (initalHide){
          initalHide = false;
          return undefined;
        }
        return value;
      });
    }
  };
});

Updated Demo

如果$ pristine，如何隐藏input元素的值

1 个答案: