Calling a function in ng-repeat

Question

I have an <input type="file"> in ng-repeat and I want to call a function whenever the value of element changes for the <input type="file"> element in ng-repeat.

I tried calling a $(#"id").change() function but it is not working. I have tried using ng-change, but ng-repeat doesnt work when I use ng-change. This is my code:

IN HTML

<div ng-repeat="item in items">
    <input  type="file" accept="image/*" id="add_{{$index}}"/>
</div>

IN JS

$("#add_images").change(function() {
    alert("HI");
}

You can use `ng-change=""` or need to use event delegation.. — Arun P Johny, Jan 27 '16 at 11:30
Also ID of an element must be unque.. so an static id in a loop is not a valid html — Arun P Johny, Jan 27 '16 at 11:31

score 2 · Answer 1 · answered Jan 27 '16 at 11:34

Why you are mixing Angular and JQuery?

You have everything in Angular which you can use it easily!

In HTML

<div ng-repeat="item in items">
    <input  type="file" accept="image/*" id="add_images" ng-change="doSomething()"/>
</div>

In controller JS

$scope.doSomething = function(){
  //do whatever you want to
}

score 1 · Answer 2 · answered Jan 27 '16 at 12:12

Angular doesn't support ng-change for input type=file github

but there are ways to trigger methods on the scope see my jsfiddle

<div>
  <div ng-controller='MyCtrl'>
    <pre>{{items | json }}</pre>
    <div ng-repeat="item in items">
      <input type="file" onchange='angular.element(this).scope().onchange(this)' />
    </div>
  </div>
</div>

angular.module('myApp', [])
  .controller('MyCtrl', function($scope) {
    $scope.items = ['test', 'test2'];
    $scope.onchange = function(that) {
      alert(that.value)
    }
  });

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

First thing you are repeating id inside ng-repeat. Id should be unique. I will suggest you to use.

<div ng-repeat="item in items">
  <input  type="file" accept="image/*" />
</div>

$index is the index of item.

Second use onchange function of Javascript

<div ng-repeat="item in items">
  <input  type="file" accept="image/*" onchange="angular.element(this).scope().myFunc()" id="add_images_$index"/>
</div>

Attach function to scope

$scope.myFunc = function() {
  alert("Hi");
}

Also refer ng-change on <input type="file" if you are trying to catch ng-change on input type file element.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 27 '16 at 11:33

murli2308

2,976
4
26
47

@murali I have tried what u said,but ng-repeat is not working when I use ng-change – Venkat Jan 27 '16 at 11:51

score 0 · Answer 4 · answered Jan 27 '16 at 12:21

<div>
  <div ng-app="myApp" ng-controller='MyCtrl'>    
    <div ng-repeat="item in items">
      <input type="file" ng-change="functionName()" />
    </div>
  </div>
</div>

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
     $scope.functionName= function() {
     alert("hi your call worked successfully");
     }; 
});

score 0 · Answer 5 · answered Jan 27 '16 at 12:25

you can use directive which is much better and cleaner.

HTML :

<div ng-repeat="item in items">
    <input  type="file" accept="image/*" id="add_{{$index}}" dir-change/>
</div>

JS:

directive('dirChange',function(){

  return {
    link : function(scope,ele){ 

      ele.bind('change',function(){ 
          //code

      });
    }
  }

})

Here is the Plunker

Calling a function in ng-repeat

5 Answers5