34

我是角度 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>

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

但是，当我将其更改为它时，ng-click它可以工作。

4

6 回答 6

43

ng-change 需要 ng-model，

<input type="text" name="abc" class="color" ng-model="someName" ng-change="myStyle={color:'green'}">
于 2014-09-30T07:27:55.033 回答
6

我遇到了同样的问题，我的模型是从另一个表单绑定的，我已经添加了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 获取数据（两种方式绑定）ng-change在这种情况下不起作用。$scope.$watch对我来说是一个解决方案：

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

希望这有帮助。

于 2016-06-30T04:10:50.450 回答
2

当您想在 Angular 中编辑某些内容时，您需要在 html 中插入一个 ngModel

在您的示例中尝试此操作：

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

你根本不需要看变化！

于 2014-09-30T07:32:44.193 回答
2

也许你可以尝试这样的事情：

使用指令

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

http://jsfiddle.net/H2EAB/

于 2014-09-30T07:35:38.863 回答
2

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/

于 2015-07-27T23:46:15.697 回答
1

首先，我正在查看您的代码，而您没有任何控制器。所以我建议你使用控制器。我认为您必须使用控制器，因为您的变量{{myStyle}}未编译，因为 2 花括号是可见的，它们不应该。

其次，您必须使用 ng-model 作为输入，该指令会将输入的值绑定到您的变量。

于 2014-09-30T07:33:04.260 回答