0

I will have N number of input fields and every field will have a value CHANGE without getting in or out of focus. How can I detect value change of every input field.

I only found one question related and using that I tried following but it is not working. can Any one help further

for (var i=0;i<$scope.customers.product.length;i++)
{
//i m trying to get unique ids and bining input fields for change 
$('#total-i').on('input', function() { 
    alert($(this).val()); // get the current value of the input field.
});
}   
//there will be multiple of input fields having unique ids
<input id="total-{{$index}}" value={{cust.price*cust.quantity}}"/>
Community
  • 1
  • 1
Usman Ali Siddiqui Sabzwari
  • 375
  • 1
  • 5
  • 18

3 Answers3

0

It should be easy and possible with ng-change provided you have ng-model associated to input.

<input id="total-{{$index}}" value={{cust.price*cust.quantity}}" ng-model="total" ng-change="updatemethod()"/>

total and updatemethod() should be part of controller $scope.

anoop
  • 3,812
  • 2
  • 16
  • 28
  • I need to either have value or ng-model in my input element. Using both does not displays blank output on my html page @Panomosh – Usman Ali Siddiqui Sabzwari Mar 30 '17 at 12:20
  • why you need `value` to your input when `ng-model` is there in angular?, if you are using `jquery`, then use `$('#myContent').keyup(function() { ` or `.change()` – anoop Mar 30 '17 at 12:28
  • I am resolving an expression in my value and if I have to use ng-model then I have to change much of my LOCs and YES this is the only way out I too think. and before that, I thought of asking for help here. Even before I was using a label here. Getting into situation made me use input field and now i think making value to model will end the problem @anoop – Usman Ali Siddiqui Sabzwari Mar 30 '17 at 12:33
  • @usman : Even if you use label for `{{cust.price*cust.quantity}}`, then also price and quantity should be part of `ng-model`. You need to have them inside ng-model then only you can utilize angular 2 way binding. – anoop Mar 30 '17 at 12:41
  • yes they are part of the model and i was trying to get their product in a label. Which I achieved very well. Then i tried to do something when label value changes. and that got me stuck to NO other way but to change it to model. :) whole story @anoop – Usman Ali Siddiqui Sabzwari Mar 30 '17 at 12:46
0

The question you linked in your question is not about Angular (it uses jQuery). Where is the Angular way to do it (considering you are showing inputs with ng-repeat):

<div ng-repeat="i in items">
    <input ng-model="i" ng-change="update(i)"/>
</div>

With this code, whenever you will update i (eg: when you will change the input value), the update(i) method will be triggered.

Here is a tiny example of what I'm explaining:

function MyCtrl($scope) {
    $scope.items = ['1', '2', '3', '4', '5'];
    
    $scope.update = function(item) {
        alert(item + ' has been changed!');
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
    <div ng-repeat="i in items">
        <input type="text" ng-model="i" ng-change="update(i)"  />
    </div>
</div>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • This ng-change method works only when we focus in or out of the input field. Whereas I am changing value of input field using expressions and values of expression variables are changed using other input fields present on my page. Therefore I reference that only question related to my problem – Usman Ali Siddiqui Sabzwari Mar 30 '17 at 12:22
  • @Usman You can set a `watcher` on each variable to get change events. – Mistalis Mar 30 '17 at 12:25
  • can you tell me how to add a watcher by ID. As I am not having any specific variable name for that repeated input field but ID – Usman Ali Siddiqui Sabzwari Mar 30 '17 at 12:28
0

I'd create an object to associate with the ng-model and then watch it. Since you didn't provide a Codepen of fiddle instance to meddle with, I'm not sure this works, check it out.

//for each index
$.each(modelObject, function(key, value) {
   //set a watcher
   var watchString = "modelObject[" +key + "]";  
   $scope.$watch(watchString, function (newValue, oldValue) {
      $scope.update(modelObject[key]);
   });
});
Eduard Andar
  • 1
  • 2