web-dev-qa-db-ja.com

ng-changeがテキスト入力で機能しない

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

プランカー- http://plnkr.co/edit/APrl9Y98Em0d6rxuzRDE?p=preview

ただし、ng-clickに変更すると機能します。

angularjscolorsangularjs-directiveangularjs-ng-change
33
Ashwin

ng-changeにはng-modelが必要です。

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

私は同じ問題を抱えており、私のモデルは別のフォームからバインドしています。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からデータを取得します（2つの方法のバインド）が、この場合ng-changeは機能しません。 $scope.$watchは私の解決策です。

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

この助けを願っています。

4
Huy Nguyen

Angularで何かを編集する場合は、htmlにngModelを挿入する必要があります

サンプルでこれを試してください：

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

変化を見る必要はまったくありません！

3
Sander Elias

少し複雑なロジックを実行する必要がある場合は、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/

2
Razan Paul

たぶん、あなたはこのような何かを試すことができます：

ディレクティブを使用する

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

まず、私はあなたのコードを把握していますが、コントローラーはありません。そのため、コントローラーを使用することをお勧めします。変数{{myStyle}}はコンパイルされないため、コントローラーを使用する必要があると思います。これは、2つの波括弧が表示されていないためです。

次に、入力にng-modelを使用する必要があります。このディレクティブは、入力の値を変数にバインドします。

1
Mathieu Bertin