ng-change non funziona su un input di testo

Sono nuovo di js angolare. Nel mio codice c'è un selettore di colori inizializzato da un campo di testo. L'utente modifica il valore del colore e desidero che il colore venga riflesso come sfondo di un testo in un intervallo. Non funziona. Che cosa manca?ng-change non funziona su un input di testo

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

Tuttavia quando lo cambio per ng-click funziona.

fonte

2014-09-30 Ashwin

ng-cambiamento richiede ng-modello,

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

fonte

2014-09-30 07:27:55

come è possibile utilizzare il valore nel selettore colori come colore dello stile? – Ashwin

Una cosa che la risposta non menziona è il fatto che l'ordine è effettivamente importante, è necessario impostare il modello-ng prima del cambio-ng per vedere come funziona. – user1336321

@ user1336321, funziona in qualsiasi ordine in corrente angolare (non sono sicuro di 1.0 o qualcosa del genere). Non esiste una regola di ordine per le direttive - c'è una priorità ... Who on Earth mette +1 su questo commento ... –

Quando si desidera modificare qualcosa in angolare è necessario inserire un ngModel nel tuo html

provare questo nel campione:

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

Non è necessario guardare il cambiamento!

fonte

2014-09-30 07:32:44

Innanzitutto sto osservando il tuo codice e non hai alcun controller. Quindi ti suggerisco di usare un controller. Penso che devi usare un controller perché la tua variabile {{myStyle}} non è compilata perché i 2 parentesi graffa sono visibili e non dovrebbero.

In secondo luogo è necessario utilizzare ng-model per il proprio input, questa direttiva vincolerà il valore dell'input alla variabile.

fonte

2014-09-30 07:33:04

Il mio codice è solo un codice di esempio per elaborare il problema. In realtà in realtà è molto complesso e ho usato controller. Comunque grazie per il tuo suggerimento. – Ashwin

Ok, quindi devi solo associare un modello ng al tuo input –

Forse si può provare qualcosa di simile:

Utilizzando una direttiva

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

http://jsfiddle.net/H2EAB/

fonte

2014-09-30 07:35:38

si può anche legare una funzione con ng-change listener di eventi, se hanno bisogno di correre un po 'più logica complessa.

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

fonte

2015-07-27 23:46:15

Ho avuto lo stesso problema, il mio modello è vincolante da altra forma, ho aggiunto ng-change e ng-model e ancora non funziona:

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

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

Un input #pdf-url ottiene dati da dropzone (in due modi vincolanti), tuttavia, ng-change non funziona in questo caso. $scope.$watch è una soluzione per me:

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

Spero che questo aiuto.

fonte

2016-06-30 04:10:50

ng-change non funziona su un input di testo

risposta

Problemi correlati