Очистить заполнитель при использовании ng-модели

0

Я хотел бы создать 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>
  • 0
    Angular помещает $scope.hello в значение элемента <input > , ничего общего с заполнителем. Не могли бы вы быть более конкретным.
  • 0
    У меня есть переменная в области, и я хотел бы отредактировать ее. В этом случае я хотел бы иметь возможность изменить "привет" на "hello123456" с вводимым текстом
Показать ещё 2 комментария
Теги:
angular-ngmodel
angularjs-scope
placeholder

4 ответа

0
Лучший ответ

У вас есть переменная в области, называемая 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>
  • 1
    Большое спасибо!
0

Используйте 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


На основании этого сообщения.

0

Поместите $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>
  • 0
    Но что, если $ scope.hello уже имеет значение, прежде чем открывать приложение?
  • 0
    Какое бы значение вы ни указали для $ scope.hello, оно будет показано там. Если вы не хотите показываться, поместите $ scope.hello в пустое значение.
Показать ещё 2 комментария
0

Поскольку вы привязываете значение вашего поля ввода к переменной "hello", которая существует в вашей области действия, которая также имеет значение "hello". Заполнитель не имеет к этому никакого отношения, текст, который вы видите, является значением поля ввода. Чтобы очистить поле ввода, установите переменную области видимости в пустую строку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню