Question

据我所知，AngularJS应用程序应该是单页面的。对于Web表单也应如此。

我可以轻松处理文本输入字段：

var app = angular.module('snippet', []);

app.controller('MainCtrl', function($scope) {
  $scope.submit = () => {
    $scope.result = $scope.inputText;
  }
});

h1 {
  font-family:Arial;
  font-size:14pt;
}

<!DOCTYPE html>
<html ng-app="snippet">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS snippet</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      <h1>Enter text:</h1>
      <input ng-model="inputText">
      <input type="button" ng-click="submit()" value="submit">
    </div>    
    <div>
      <h1>Text you have entered:</h1>
      <span>{{result}}</span>
    </div>
  </body>
</html>

但是，当我将input type="text"更改为input type="file"并尝试指定文本文件时，$scope.result属性仍然未定义：

var app = angular.module('snippet', []);

app.controller('MainCtrl', function($scope) {
  $scope.submit = () => {
    $scope.result = $scope.inputFile;
  }
});

h1 {
  font-family:Arial;
  font-size:14pt;
}

<!DOCTYPE html>
<html ng-app="snippet">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS snippet</title>
    <link rel="stylesheet" href="style.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      <h1>Enter text:</h1>
      <input type="file" accept=".txt" ng-model="inputFile">
      <input type="button" ng-click="submit()" value="submit">
    </div>
    
    <div>
      <h1>Text you have entered:</h1>
      <span>{{result}}</span>
    </div>
  </body>

</html>

我应该如何修改上面的代码段以使其与文本文件一起使用？

上传文件的角度方式

0 个答案: