ng-change no funciona en una entrada de texto


Soy nuevo en angular js. En mi código hay selector de color inicializado desde un campo de texto. El usuario cambia el valor de color y quiero que ese color se refleje como fondo de un texto en un lapso. No está funcionando. ¿Qué falta?

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>

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

Sin embargo, cuando lo cambio a ng-click funciona.

Author: Ashwin, 2014-09-30

6 answers

Ng-change requiere ng-model,

<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">
 32
Author: Petr Averyanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-30 07:27:55

Tengo el mismo problema, mi modelo es vinculante desde otra forma, he añadido ng-change y ng-model y todavía no funciona:

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

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

Una entrada #pdf-url obtiene datos de dropzone (enlace de dos maneras), sin embargo, ng-change no funciona en este caso. $scope.$watch es una solución para mí:

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

Espero que esto ayude.

 4
Author: Huy Nguyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-16 09:06:57

Cuando quieras editar algo en Angular necesitas insertar un ngModel en tu html

Pruebe esto en su muestra:

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

¡No necesitas ver el cambio en absoluto!

 3
Author: Sander Elias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-30 07:32:44

Tal vez puedas intentar algo como esto:

Usando una directiva

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

Http://jsfiddle.net/H2EAB /

 2
Author: Asanka Umesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-05 09:39:58

También se puede enlazar una función con ng-change event listener, si necesitan ejecutar una lógica un poco más compleja.

<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 /

 2
Author: Razan Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-27 23:54:44

Primero estoy viendo tu código y no tienes ningún controlador. Así que sugiero que uses un controlador. Creo que tienes que usar un controlador porque tu variable {{myStyle}} no está compilada porque las 2 llaves son visibles y no deberían.

En segundo lugar, debe usar ng-model para su entrada, esta directiva vinculará el valor de la entrada a su variable.

 1
Author: Mathieu Bertin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-30 07:33:04