2

我已将 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};
}
4

1 回答 1

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>

演示 Plunkr

更新

我建议有一个指令来改变隐藏$viewValue初始加载并显示占位符。指令将使用$formatterson控制显示值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;
      });
    }
  };
});

更新的演示

于 2015-09-03T17:38:31.233 回答