Question

我正在尝试上传并在ng-repeat中显示图像。

我已成功使用jquery函数上传和显示没有ng-repeat的图像：

<html>
<head>
        <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<input type='file' />
<img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/>
</body>
</html>
...
<script>
$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};
</script>

如果我将代码更改为ng-repeat内部，则jQuery函数可以正常工作：

<div ng-repeat="step in stepsModel">
 <input type='file' />
 <img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/>
/div>

2个问题：

如何将jquery函数更改为angular函数？
如何使用jquery函数处理ng-reapeat？

非常感谢

Answer 1

您的代码是＆＃34;稍微＆＃34;在许多方面存在问题。看起来你是AngularJS的新手 - 所以，欢迎。

在引用代码时，看起来stepsModel是一个相对于当前$ scope的变量。当$ scope.sepsModel更新时，Angular的数据绑定将负责并使用您的新数据更新HTML： https://docs.angularjs.org/tutorial/step_04

至于你的问题，您的目标应该是在上传时将图像添加到$ scope.stepsModel中。 $ scope.stepsModel将在HTML中自动概述所有上传的图像。

在某种程度上，不必将jQuery用于您的预期目的。这样你就可以更好地学习，并且为了良好的精神，我已经根据你自己的心态提出了应该如何做的建议：

http://jsfiddle.net/kkhxsgLu/2/

    $scope.imageUpload = function(element){
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    reader.readAsDataURL(element.files[0]);
}

$scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}

祝你好运。

Answer 2

我认为你需要创建一个服务（参见this）并将你的jQuery代码放入该服务中。对于第二个问题，我请你告诉我们代码。

AngularJS - 使用ng-repeat和jQuery上传和显示图像

2 个答案: