在 ng-repeat 中调用函数

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 不支持 ng-change for input type=file github

但有一些方法可以触发作用域上的方法，请参阅我的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

<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 4

你可以使用更好更干净的指令。

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

Answer 5

您在 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"。