使用 ng-model 时清空占位符答案

【问题标题】：Empty the placeholder when using ng-model使用 ng-model 时清空占位符
【发布时间】：2016-03-29 08:46:45
【问题描述】：

我想创建一个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>

【问题讨论】：

Angular 将$scope.hello 放入<input > 元素值中，与占位符无关。能否请您说的更具体些。
我在作用域中有一个变量，我想编辑它。在这种情况下，我希望能够使用输入文本将“hello”更改为“hello123456”
对不起，再次完全不清楚您为什么似乎无法做到这一点。
可以，但无法清除 html 页面上的“输入”元素。我希望它不包含任何内容。实际上它显示了 $scope.hello 的内容

标签： angularjs angularjs-scope placeholder angular-ngmodel

【解决方案1】：

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

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

那么你可以使用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>

【讨论】：

【解决方案2】：

因为您将输入框的值绑定到存在于您的作用域中的变量“hello”，该变量也具有值“hello”。占位符与它无关，你看到的文字就是输入框的值。要清除输入框，请将范围变量设置为空字符串。

【讨论】：

【解决方案3】：

使用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。

【讨论】：

【解决方案4】：

输入$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>

【讨论】：

但是如果 $scope.hello 之前已经有一个值来打开应用呢？
无论你给 $scope.hello 赋予什么价值，它都会显示在那里。如果你想，不显示，把 $scope.hello 为空。
这是我的问题，如果有一些方法可以清除输入类型而不将 $scope.hello 设置为空
听 - ng-model 中 'hello' 的值是 $scope.hello。这就是为什么在占位符中显示的值显示在 $scope.hello 中存储的任何内容。您可以更改 ng-model 中的变量名称。说 ng-model="hello1"。现在不会显示了。它将显示存储在 $scope.hello1 而不是 $scope.hello 中的内容