如果它的 $pristine 如何隐藏输入元素的值

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 中 & 然后您可以轻松检查该表单元素的 $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 并显示占位符。指令将在 ngModelControlller

上使用 $formatters 控制显示值

标记

<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 如何隐藏输入元素的值

how to hide value of input element if its $pristine

forms

validation

input

angularjs

angularjs-forms