使用ng模型时清空占位符

我想创建一个text input，将其链接到Scope中的一个变量。但我不希望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>

作用域中有一个变量，称为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>

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

使用ngAttr详细信息https://docs.angularjs.org/guide/interpolation

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

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

基于此帖子。

放入$scope.hello = ''或甚至不初始化，它将通过输入标签进行初始化，您可以直接使用它。

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>

相关内容

最新更新

热门标签：