使用 ng-model 时清空占位符

Question

我想创建一个 text input 将它链接到作用域中的一个变量。但我不希望 placeholder 显示任何内容。但是，范围内此变量的内容继续显示。为什么？

var app = angular.module('example', []);

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'hello';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" placeholder="">
</body>

Answer 1

因为您将输入框的值绑定到范围内存在的变量 'hello'，该变量也具有值 'hello'。占位符与它无关，您看到的文本是输入框的值。要清除输入框，请将范围变量设置为空字符串。

Answer 2

放$scope.hello = ''或者不初始化，会通过input标签来初始化，可以直接使用。

var app = angular.module('example', []);

app.controller('MainCtrl', function($scope) {
  $scope.hello = '';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" placeholder="">
</body>

Answer 3

您在范围内有一个变量，名为 hello。您有一个绑定到同一变量的 <input> 元素。不可避免地，该元素将具有与该变量相同的值。

据我从您的评论中了解到，您希望输入元素不要绑定到该变量。在这种情况下，有几种选择。一个例子是在你的范围内有一个单独的变量。

然后你可以使用ngChange只在输入改变时更新第一个变量，从而保持它的初始值。

var app = angular.module('example', []);

app.controller('MainCtrl', function($scope) {
  $scope.hello = 'hello';
  $scope.field = '';
  $scope.change = function() {
    $scope.hello = $scope.field;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body  ng-app="example" ng-controller="MainCtrl">
    <input type="text" ng-model="hello" ng-change="change()">
</body>

Answer 4

https://docs.angularjs.org/guide/interpolation

中详细介绍了使用 ngAttr

<input type="text" ng-model="inputText" ng-attr-placeholder="{{somePlaceholder}}" />

问题：https://github.com/angular/angular.js/issues/5025

基于this post。

使用 ng-model 时清空占位符

Empty the placeholder when using ng-model

placeholder

angularjs

angularjs-scope

angular-ngmodel