如何使用Angularjs提交表单

时间:2013-08-15 09:25:03

标签: angularjs angularjs-directive angularjs-scope

我是angularJS的新手。我想提交一个带有angularjs的表格。

我使用以下代码:

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

app.controller('Ctrl3', function($scope, $http, $location,$compile) {

    $scope.submit = function(){
        alert($scope.filename);
    }

});

以我正在使用的形式:

  <div ng-show="show">
           <form ng-submit="submit()"  enctype="multipart/form-data">
           <input type="file" ng-model="filename" name="filename" />
           <br/>
           <input type="submit" class="btn btn-primary" name="upload" value="Upload">
           </form>
           </div>

当我提交表单时,它会提醒undefined。提交表单后如何打印文件字段的值?

1 个答案:

答案 0 :(得分:1)

以下是使用angularjs

的文件上传的工作示例

http://jsfiddle.net/danielzen/utp7j/

检查在控制器中添加的设置文件功能

 scope.setFiles = function(element) {
    scope.$apply(function(scope) {
      console.log('files:', element.files);
      // Turn the FileList object into an Array
        scope.files = []
        for (var i = 0; i < element.files.length; i++) {
          scope.files.push(element.files[i])
        }
      scope.progressVisible = false
      });
    };

并在模板中添加了这一行

 <input type="file" ng-model-instant id="fileToUpload" multiple onchange="angular.element(this).scope().setFiles(this)" />