ng-change не работает над текстовым вводом

Я новичок в угловых js. В моем коде есть элемент выбора цвета, инициализированный из текстового поля. Пользователь меняет значение цвета, и я хочу, чтобы этот цвет отражался в качестве фона текста в промежутке. Это не работает. Чего не хватает?ng-change не работает над текстовым вводом

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 это работает.

источник

2014-09-30 Ashwin

нг-изменение требует нг-модели,

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

источник

2014-09-30 07:27:55

Как мы можем использовать значение в подборщике цветов как цвет стиля? – Ashwin

В одном ответе не упоминается тот факт, что заказ действительно имеет значение, вам нужно установить ng-модель перед ng-change, чтобы увидеть, как это работает. – user1336321

@ user1336321, он работает в любом порядке в текущих угловых (не уверен около 1.0 или что-то еще). Для директив нет правила заказа - есть приоритет ... Кто на Земле положил +1 на этот комментарий ... –

Если вы хотите изменить что-то в угловых вам нужно вставить ngModel в вашем HTML

попробовать это в образце:

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

Вам не нужно смотреть изменения вообще!

источник

2014-09-30 07:32:44

Прежде всего, я использую ваш код, и у вас нет никакого контроллера. Поэтому я предлагаю вам использовать контроллер. Я думаю, вы должны использовать контроллер, потому что ваша переменная {{myStyle}} не компилируется, потому что 2 фигурные скобки видны, и они не должны.

Во-вторых, вы должны использовать ng-модель для ввода, эта директива привяжет значение ввода к вашей переменной.

источник

2014-09-30 07:33:04

Мой код - всего лишь образец кода, чтобы решить проблему. На самом деле в реале это очень сложно, и я использовал контроллер. В любом случае спасибо за ваше предложение. – Ashwin

Итак, вам нужно просто привязать ng-модель к вашему входу –

Может быть, вы можете попробовать что-то вроде этого:

Используя директиву

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

http://jsfiddle.net/H2EAB/

источник

2014-09-30 07:35:38

Можно также связать функцию с 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-27 23:46:15

я получил тот же вопрос, моя модель является обязательным с другой форме, я добавил 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-30 04:10:50

ng-change не работает над текстовым вводом

ответ

Смежные вопросы