ng-change не работает с текстовым вводом

Я новичок в угловых js. В моем коде есть элемент выбора цвета, инициализированный из текстового поля. Пользователь меняет значение цвета, и я хочу, чтобы этот цвет отражался в качестве фона текста в промежутке. Это не работает. Чего не хватает?

HTML:

<body ng-app="">
   <input type="button" value="set color" ng-click="myStyle={color:'red'}">
   <input type="button" value="clear" ng-click="myStyle={}">
   <input type="text" name="abc" class="color" ng-change="myStyle={color:'green'}">
   <br/>
   <span ng-style="myStyle">Sample Text</span>
   <pre>myStyle={{myStyle}}</pre>
</body>

Plunker - http://plnkr.co/edit/APrl9Y98Em0d6rxuzRDE?p=preview

Однако, когда я меняю его на ng-click он работает.

Ответ 1

ng-change требует ng-модели,

<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">

Ответ 2

У меня такая же проблема, моя модель связана с другой формой, я добавил ng-change и ng-model и она все еще не работает:

<input type="hidden" id="pdf-url" class="form-control" ng-model="pdfUrl"/>

<ng-dropzone
  dropzone="dropzone"
  dropzone-config="dropzoneButtonCfg"
  model="pdfUrl">
</ng-dropzone>

Вход #pdf-url получает данные из dropzone (два способа связывания), однако ng-change в этом случае не работает. $scope.$watch - это решение для меня:

$scope.$watch('pdfUrl', function updatePdfUrl(newPdfUrl, oldPdfUrl) {
  if (newPdfUrl !== oldPdfUrl) {
    // It updated - Do something you want here.
  }
});

Надеюсь, это поможет.

Ответ 3

Когда вы хотите редактировать что-то в Angular, вам нужно вставить ngModel в свой html

попробуйте это в своем примере:

    <input type="text" name="abc" class="color" ng-model="myStyle.color">

Вам не нужно смотреть изменения вообще!

Ответ 4

Возможно, вы можете попробовать что-то вроде этого:

Использование директивы

directive('watchChange', function() {
    return {
        scope: {
            onchange: '&watchChange'
        },
        link: function(scope, element, attrs) {
            element.on('input', function() {
                scope.onchange();
            });
        }
    };
});

http://jsfiddle.net/H2EAB/

Ответ 5

Также можно связать функцию с прослушивателем событий ng-change, если им нужно запустить более сложную логику.

<div ng-app="myApp" ng-controller="myCtrl">      
        <input type='text' ng-model='name' ng-change='change()'>
        <br/> <span>changed {{counter}} times </span>
 </div>

...

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
      $scope.name = 'Australia';
      $scope.counter = 0;
      $scope.change = function() {
        $scope.counter++;
      };
});

https://jsfiddle.net/as0nyre3/1/

Ответ 6

Во-первых, я использую ваш код, и у вас нет никакого контроллера. Поэтому я предлагаю вам использовать контроллер. Я думаю, вам нужно использовать контроллер, потому что ваша переменная {{myStyle}} не компилируется, потому что две фигурные скобки видны, и они не должны.

Во-вторых, вы должны использовать ng-модель для ввода, эта директива привяжет значение ввода к вашей переменной.