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.
6 answers
Ng-change requiere ng-model,
<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">
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.
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!
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();
});
}
};
});
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++;
};
});
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.
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