Angular JS - текстовое поле не обновляется после очистки

Question

Angular JS - текстовое поле не обновляется после очистки

0

Я новичок в Angular JS. При создании примера приложения я столкнулся с проблемой ниже, когда текстовое поле не устанавливается сразу после того, как значение в его очистке с помощью JavaScript.Below - это мой код:

<!DOCTYPE html>
 <html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script>
     var app = angular.module("myApp", []);

     app.controller("myCtrl", function () {

        this.showName = function () {
            this.user = { name: "John" };
        }

        this.clear = function () {

            document.getElementById("name").value = "";

        }
    });
</script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl as ctrl" class="container">

    <input type="button" ng-click="ctrl.showName()" value="Show Name"/>
    <input type="text" id="name" ng-model="ctrl.user.name" />
    <input type="button" value="Clear" ng-click="ctrl.clear()" />

 </div>
</body>

В первый раз, когда я нажимаю кнопку "Показать имя", я получаю имя в текстовом поле. Но если я очищаю текстовое поле, нажав кнопку "Очистить", а затем снова нажмите кнопку "Показать", имя не будет заполнено в тексте коробка. Может кто-нибудь, пожалуйста, скажите мне, почему это происходит, и так или иначе, чтобы это исправить?

Вот мой код в plunkr - http://plnkr.co/edit/MXlH2o?p=preview

Vishnu 08 июнь 2016, в 13:23

Источник

Теги:

javascript

angularjs

angularjs-scope

angularjs-directive

angularjs-ng-repeat

4 ответа

1

изменить функцию clear на этот код

this.clear = function () {
     this.user.name="";
}

Behnam Mohammadi 08 июнь 2016, в 09:46

1

@Bamnaam, вы также можете сказать ОП, почему он должен это сделать? Ответы в Stackoverflow должны быть достаточно ясными и описательными. Так что имейте это в виду.
Ahmad Baktash Hayeri 08 июнь 2016, в 13:31

1

вам не нужен метод clear() в контроллере, просто используйте двойную привязку в угловом, установите имя пользователя в пустую строку, когда вы нажмете на кнопку, и представление будет обновлено.

<input type="button" value="Clear" ng-click="ctrl.user.name = ''" />

Karim 08 июнь 2016, в 09:01

0

Спасибо Карим. Но не могли бы вы сказать причину, по которой мой код не работает?
Vishnu 09 июнь 2016, в 05:31
0

Ну, я просто не думаю, что это правильный способ использования угловых. С angular вы не должны манипулировать dom таким образом, чтобы не связываться с нативным JavaScript, а использовать предоставленные инструменты. ура
Karim 09 июнь 2016, в 11:06

1

Очистите имя, подобное этому,

this.clear = function () {
                this.user.name = "";
            }

DilumN 08 июнь 2016, в 08:15

Ещё вопросы

@Bamnaam, вы также можете сказать ОП, почему он должен это сделать? Ответы в Stackoverflow должны быть достаточно ясными и описательными. Так что имейте это в виду.
Спасибо Карим. Но не могли бы вы сказать причину, по которой мой код не работает?
Ну, я просто не думаю, что это правильный способ использования угловых. С angular вы не должны манипулировать dom таким образом, чтобы не связываться с нативным JavaScript, а использовать предоставленные инструменты. ура

Mohit Saxena · Accepted Answer · 2016-06-08T09-32-00.000Z

В вашей четкой функции сделайте ниже код, чтобы очистить значение.

this.user = { name: "" };

Спасибо, Мохит. Это работает, но не могли бы вы сказать причину, по которой мой код не работал?
Да, фактически в Angular, когда вы очищаете любое поле, получая этот элемент, в этом случае ng-модель блокируется, а затем двустороннее связывание не работает, поэтому оно не работает.