Question

我试图显示用户使用输入[type = file]选择的文件列表。

HTML

<div ng-app="myApp">
    <div ng-controller="UploadFilesCtrl">
        <input type="file" onchange="angular.element(this).scope().uploadFiles(this)" multiple />
        <ul>
            <li ng-repeat="name in filenames">
                {{name}}
            </li>
        </ul>
        <button ng-click="test()">PRINT</button>
    </div>
</div>

JS

app = angular.module('myApp');

app.controller('UploadFilesCtrl', ['$scope', function($scope){

    $scope.uploadFiles = function(element){

        var files = element.files;
        var filenames=[];

        for (i=0; i<files.length; i++){
            filenames.push(files[i].name);
        }


        $scope.files = files;
        $scope.filenames = filenames;   
        console.log(files, filenames);
    };


    $scope.test = function(){
        console.log($scope.files, $scope.filenames);
    }
}]);

由于某种原因，列表永远不会更新。

filenames中的files和$scope变量永远不会在uploadFiles函数之外更新（当我选择文件后点击PRINT按钮我得到未定义）。

有什么想法吗？

谢谢！

Answer 1

使用$scope.$apply()更新$scope个对象

...
$scope.files = files;
$scope.filenames = filenames;   
$scope.$apply();
console.log(files, filenames);
...

休息工作正常。

修改

RGraham 是正确的。这不是一个完整的证明解决方案。你应该使用指令代替。但是，只是为了解决方法，你可以检查digest是否正在进行中：

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') { $scope.$apply(); }

更新小提琴：http://jsfiddle.net/Sourabh_/HB7LU/13086/

Answer 2

您不需要$ scope。$ apply（）

............................................... .................................................. .................................................. ............

你的代码看起来非常好。如果你做了我的下面的事情，它应该工作。

但你只错过了一件事。但这是主要的事情。

我想你可能会得到以下错误

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化模块myApp：错误：[$ injector：nomod]模块＆＃39; myApp＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

请在您的浏览器控制台窗口中验证，如果您收到此错误，请尝试此操作

app = angular.module('myApp',[]);

而不是

app = angular.module('myApp');

您错过了主模型('myApp',[]);

中的空子模型

所有其他代码看起来都很好。

更新：

请参阅此fiddler Demo，现在单击打印按钮时会显示所选文件名。

使用AngularJS显示文件列表并输入[type = file]

2 个答案:

更新：