在AngularJS中将输出作为表达式

时间:2017-04-08 20:05:53

标签: javascript angularjs html5

无法理解我犯了哪个错误,请让我知道我在学习过程中的错误:-)

此代码正在实现上传文件。

语法错误,否则编码错误



(function() {
  var app = angular.module("mode", ['ngFileUpload']);

  app.controller("simCntrl", ['$scope', '$timeout', 'Up-load', function($scope, $timeout, Upload) {
    // $scope.var = 10;                                        
    $scope.loadFile = function(files, errFiles) {
      // alert('hi loaded');
      $scope.files = files;
      $scope.errFiles = errFiles;

      angular.forEach(files, function(file) {
        file.upload = Upload.upload({
          url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
          data: {
            file: file
          }
        });

        file.upload.then(function(response) {
          $timeout(function() {
            file.result = response.data;
          });
        }, function(response) {
          if (response.status > 0) {
            $scope.errorMsg = response.status + ':' + response.data;
          }
        }, function(evt) {
          file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
      });
    }
  }]);

})();

<!DOCTYPE html>
<html lang="en">
<head ng-app="mode">
  <meta charset="utf-8">
  <title>file Upload</title>
  <link rel="stylesheet" type="text/css" href="file.css">
  
  <script type="text/javascript" src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
  <script type="text/javascript" src="C://wamp/www/fileUpload/ng-file-upload-shim.js"></script>
  <script type="text/javascript" src="C://wamp/www/fileUpload/ng-file-upload.js"></script>
  <script type="text/javascript" src="upload.js"></script>
</head>

<body ng-controller="simCntrl">
  <h4> file Upload </h4>
  <button ngf-select="loadFile($files, $invalidFile)" multiple ngf-max-size="1MB">Choose your File</button>
  <br/> <br/>
  Files:
  <ul>
    <li ng-repeat="f in fiels" style="font: smaller"> {{f.name}} {{f.$errorParam}}
      <span class="progress" ng-show="f.progress >= 0">
        <div style="width: {{f.progress}}% " ng-bind="f.progress + '%' "></div>
      </span>
    </li>
    <li ng-repeat="f in errFiles" style="font: smaller"> {{f.name}} {{f.$error}} {{f.$errorParam}}         </li>
  </ul>
</body>
</html>
&#13;
&#13;
&#13;

将输出作为表达式输出如下......

{{f.name}} {{f。$ errorParam}}

{{f.name}} {{f。$ error}} {{f。$ errorParam}}

1 个答案:

答案 0 :(得分:0)

修复了文件系统链接,错误的模块依赖关系Up-load和错误fiels而不是files

你有{{}}花括号,因为你的应用没有引导,它正在等待它没有得到的依赖。

var app = angular.module("mode", ['ngFileUpload']);
app.controller("simCntrl", ['$scope', '$timeout', 'Upload', function($scope, $timeout, Upload) {
  $scope.loadFile = function(files, errFiles) {
    $scope.files = files;
    $scope.errFiles = errFiles;

    angular.forEach(files, function(file) {
      file.upload = Upload.upload({
        url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
        data: {
          file: file
        }
      });

      file.upload.then(function(response) {
        $timeout(function() {
          file.result = response.data;
        });
      }, function(response) {
        if (response.status > 0) {
          $scope.errorMsg = response.status + ':' + response.data;
        }
      }, function(evt) {
        file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
      });
    });
  }
}]);
<script type="text/javascript" src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
  <script type="text/javascript" src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
  <script type="text/javascript" src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
  
<body ng-app="mode" ng-controller="simCntrl">
  <h4> file Upload </h4>
  <button ngf-select="loadFile($files, $invalidFile)" multiple ngf-max-size="1MB">Choose your File</button>
  <br/> <br/>
  Files:
  <ul>
    <li ng-repeat="f in files" style="font: smaller"> {{f.name}} {{f.$errorParam}}
      <span class="progress" ng-show="f.progress >= 0">
        <div style="width: {{f.progress}}% " ng-bind="f.progress + '%' "></div>
      </span>
    </li>
    <li ng-repeat="f in errFiles" style="font: smaller"> {{f.name}} {{f.$error}} {{f.$errorParam}}         </li>
  </ul>
</body>