web-dev-qa-db-fra.com

ng-change ne fonctionne pas sur une entrée de texte

Je suis nouveau sur angular js. Dans mon code, un sélecteur de couleur est initialisé à partir d'un champ de texte. L'utilisateur modifie la valeur de la couleur et je souhaite que cette couleur soit reflétée en tant qu'arrière-plan du texte Cela ne marche pas. Qu'est-ce qui manque?

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

Cependant, quand je le change en ng-click Ça marche.

angularjscolorsangularjs-directiveangularjs-ng-change
33
Ashwin

ng-change nécessite ng-model,

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

J'ai le même problème, mon modèle est contraignant à partir d'une autre forme, j'ai ajouté ng-change et ng-model et ça ne marche toujours pas:

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

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

Une entrée #pdf-url obtient les données de dropzone (liaison par deux manières), cependant, ng-change ne fonctionne pas dans ce cas. $scope.$watch est une solution pour moi:

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

J'espère que cette aide.

4
Huy Nguyen

Quand vous voulez éditer quelque chose dans Angular vous devez insérer un ngModel dans votre html

essayez ceci dans votre échantillon:

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

Vous n'avez pas besoin de regarder le changement du tout!

3
Sander Elias

On peut aussi lier une fonction avec ng-change écouteur d’événements, s’ils doivent exécuter une logique un peu plus complexe.

<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
Razan Paul

Peut-être que vous pouvez essayer quelque chose comme ça:

Utiliser une directive

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

http://jsfiddle.net/H2EAB/

2
Asanka Umesh

Tout d’abord, je vois votre code et vous n’avez pas de contrôleur. Donc, je suggère que vous utilisez un contrôleur. Je pense que vous devez utiliser un contrôleur parce que votre variable {{myStyle}} n'est pas compilé car les 2 accolades sont visibles et ne devraient pas l'être.

Deuxièmement, vous devez utiliser ng-model pour votre entrée. Cette directive liera la valeur de l'entrée à votre variable.

1
Mathieu Bertin