Question

我有一个关于AngularJs的有趣问题。我正在尝试创建一个动态的图像文件列表，用户可以在提交之前将其添加到数组中。我希望使用ng-repeat在列表中显示添加的文件名。

<h5>Images</h5>                                        
<ul>
    <li data-ng-repeat="image in images">
        {{image.name}}
    </li>
</ul>
<button type="button" data-ng-click="addImage()">ADD IMAGE</button>

基本上，用户点击＆＃34;添加图片＆＃34;上面的按钮和文件选择器对话框将出现。用户选择文件后，详细信息将添加到阵列中。这一切都很好......但是，ng-repeat指令没有更新。为什么会这样？

app.controller('ImagesController', ['$scope', function($scope) {
    $scope.init = function() {
        $scope.images = [];
    };
    $scope.init();

    $scope.addImage = function() {
        input = document.createElement('input');
        input.type = "file";
        input.onchange = function() {
            $scope.images.push({
                name: input.value.split(/(\\|\/)/g).pop(),
                file: input.files[0]
            });
        };
        setTimeout(function(){
            $(input).click();
        }, 200);        
    };
}]);

Answer 1

此回调发生在Angular应用程序范围之外。

在推送新值后手动触发摘要，尝试添加$scope.$apply();。有时候有更好的方法可以做到这一点，但这至少可以证实这是问题所在。

input.onchange = function() {
  $scope.images.push({
    name: input.value.split(/(\\|\/)/g).pop(),
    file: input.files[0]
   });
  $scope.$apply()
};

AngularJs：将输入选定文件添加到数组中，并在ng-repeat指令中显示文件名

1 个答案: