在angularJS中单击按钮时在选择控件中显示文件答案

【问题标题】：Display files in the select control on button click in angularJS在angularJS中单击按钮时在选择控件中显示文件
【发布时间】：2015-07-16 01:29:12
【问题描述】：

我有一个文件控制、按钮和选择控制。如下所示，

<div class="form-group">
        <h4><b>File Upload</b></h4>
        <label for="file">File</label>
        <input type="file" id="file" ng-model="message.file" class="form-control"/>
        <input type="button" value="Add" id="addFile" ng-click="addFiles(1)"/>
    </div>
    <div class="form-group">
        <label for="fileList">These are your selected files</label>
       <br/>
        <select name="files" ng-model="message.files" size="4" class="form-control"></select>
    </div>

浏览文件后，单击按钮后，文件本地路径以及文件名应显示在选择控件中。如果我第二次选择另一个文件，该文件也应该显示在选择控件中。那是2个文件名。

我是 angularJS 的新手，所以想知道如何做到这一点，任何人都可以对此有所了解。

下面是我的角度控制器，

messageBoardApp.controller('messageBoardController',
    function messageBoardController($scope,messageBoardService) {
        //$scope.submitForm = function () {
           // debugger;
           // alert("Controller");
           // messageBoardService.SaveMessage($scope.message);
        //};

        $scope.addFiles=function(){

           }
    });

此功能完全是客户端，即在用户机器中。用户还可以通过单击删除按钮删除任何一个选定的文件。

【问题讨论】：

我想你想要ng-options。
@Claies 好的，你能给我一些我可以尝试的示例代码吗？谢谢
我认为 Angular 没有为输入类型 = 文件提供默认绑定。所以你可能不得不考虑使用类似这个指令的东西：github.com/danialfarid/ng-file-upload

标签： jquery angularjs

【解决方案1】：

要访问选定的文件，您需要使用或创建指令或其他东西，因为正如我在评论中所说，Angular 不支持绑定到 type="file" 输入。

您可以阅读它here。在链接的线程中有this open source solution 的建议。但是，如果您想要一个快速而肮脏的解决方案，我已经修改了用户 db-inf 在该线程中发布的一些代码，以显示另一种可能的解决方案。

DEMO

app.js

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

app.controller('MainCtrl', function($scope) {

  $scope.files            = [];
  $scope.selectedFile     = $scope.files[0] || 'undefined'; 
  $scope.addedFiles       = [];

  $scope.updateFileList   = updateFileList;


  function updateFileList(file){
    console.log('file', file);

    $scope.files.push({
      name: file.name,
      type: file.type
    });

    // angular doesn't know about the file input so 
    // we have to manually update the scope
    $scope.$digest();
  }


});

app.directive('onFileSelected', function(){

  return {
    restrict: 'A',
    scope: {
      onFileSelected: '='
    },
    link: link
  }

  function link(scope, element, attrs){

    element.bind("change", onChange);

    function onChange(){

      var file = element[0].files[0];

      scope.onFileSelected(file);

      scope.$digest();
    }

  }


})

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form>
      <div class="form-group">

        <h4><b>File Upload</b></h4>
        <pre>Files: {{files}}</pre>
        <pre>SelectedFile: {{selectedFile}}</pre>

        <label for="file">File</label>

        <input 
          type="file" 
          id="file" 
          class="form-control" 
          on-file-selected="updateFileList"
        />


      </div>
      <div class="form-group">
          <label for="fileList">These are your selected files</label>
         <br/>
          <select 
            name="files" 
            ng-model="selectedFile" 
            ng-options="option.name for option in files" 
            size="4" 
            class="form-control"
          ></select>
      </div>
    </form>
  </body>

</html>

【讨论】：

Matt，我确实尝试了您的解决方案，但对我不起作用，我希望文件在单击按钮时显示在选择控件 UI 中。在您的代码中似乎没有按钮。