Question

所有这些都是有角度的。

没有太多无聊的细节，我有一个图像上传按钮，实际上并没有上传图像。相反，＆＃39;虚拟＆＃39;表单元素只是将信息传递给不同的数组，该数组显示图像的预览缩略图，并允许用户删除任何不想上传的内容。

除了一个令人烦恼的细节外，所有这一切都工作得相当整齐（像图像上传一样整洁）：

＆＃39;假人＆＃39;按钮始终显示上次上传的图像数量＆＃39;即使用户可能已从实际的记录数组中删除了这些图像。该按钮也可以多次使用，因此可以说“2”文件＆＃39;实际上有8个文件。或10.或0。

我希望在将其内容添加到记录数组后通过控制器清空该输入，但我无法弄清楚如何。

我已按照SO answer的SO answer尝试nulling输入模型：

vm.addImages=null;

没有运气。仍有＆＃39; 2个文件＆＃39;。

我已尝试在表单对象本身中进行翻找，再次通过{{3}}，但我不想清除整个表单，只是这一个元素。

这是来自控制器的相关$watch：

$scope.$watch('vm.addImages', function() {
        if(vm.addImages.length){
            _.each(vm.addImages, function(image){
                vm.building.images.push(image);
            });
            vm.addImages = null; //this is the issue.
        }
    });

有什么想法吗？

感谢。

Answer 1

清除功能应定义如下

$scope.clear = function () {
    angular.element("input[type='file']").val(null);
};

检查下面的代码段。

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

    app.controller('myCtrl', ['$scope', function($scope){
        $scope.uploadFile = function(){
            var file = $scope.myFile;

            console.log('file is ' );
            console.dir(file);

            var uploadUrl = "/fileUpload";
            fileUpload.uploadFileToUrl(file, uploadUrl);
        };

        $scope.clear = function () {
            angular.element("input[type='file']").val(null);
        };

    }]);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app = "myApp">

    <div ng-controller = "myCtrl">

        <input type = "file" ng-model = "myFile" file-select="file"/>

        <button ng-click="clear()">clear</button>
    </div>
  </body>

Javascript / Angular：清晰图像选择表单输入

1 个答案: