Question

我在ng-repeat中有一个<input type="file">，我希望每当ng-repeat中<input type="file">元素的元素值发生变化时调用一个函数。

我尝试调用$(#"id").change()函数，但它无效。我尝试过使用ng-change，但是当我使用ng-change时，ng-repeat不起作用。这是我的代码：

在HTML中

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

IN JS

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

Answer 1

为什么要混合使用Angular和JQuery？

你可以轻松使用Angular中的所有内容！

在HTML中

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

在控制器JS中

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

Answer 2

Angular不支持输入类型=文件github

的ng-change

但是有一些方法可以在范围内触发方法，请参阅我的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)
    }
  });

Answer 3

首先要在ng-repeat中重复id。 Id应该是唯一的。我建议你使用。

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

$ index是项目的索引。

第二次使用Javascript的onchange功能

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

将功能附加到范围

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

如果您尝试捕获输入类型文件元素的ng-change，也请参考ng-change on <input type="file"。

Answer 4

<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");
     }; 
});

Answer 5

你可以使用更好更清洁的指令。

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

      });
    }
  }

})

以下是Plunker

在ng-repeat中调用函数

5 个答案: