Question

我有一个文件上传按钮，上传后我希望使用Angular ngRepeat在下面的行中显示所选文件名，但列表没有出现。
我的代码在这里：

＆＃13;

{
  "compilerOptions": {
    "noImplicitAny": false,
    "strict": true,
    "noEmitOnError": true,
    "module": "amd",
    "removeComments": true,
    "target": "es5",
    "declaration": true,
    "outFile": "./Common.js", --> Only this line changes in other tsconfig.json files (+ does not exist in highest located tsconfig.json file)
    "inlineSourceMap": true,
    "inlineSources": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
     ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

＆＃13;

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
  $scope.fileSelected = function (element) {
        $scope.files = element.files;
    }
});

＆＃13;

＆＃13; 如果我尝试检查$ scope.files的值，我在控制台中得到文件名

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body dir="rtl" ng-app="pniotApp" ng-controller="pniotCtrl">
  <input id="uploadFile" type="file" class="filestyle" data-classButton="btn btn-primary"  multiple        data-input="false"  data-classIcon="icon-plus"    onchange="angular.element(this).scope().fileSelected(this)" data-buttonText="עיון...">
 <ul>
   <li ng-repeat="file in files">{{file.name}}</li>
 </ul>
</body>

列表中没有出现的原因是什么？

Answer 1

您忘了定义$ scope.files。

＆＃13;

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
   $scope.files=[];
  $scope.fileSelected = function (element) {
        $scope.files = element.files;
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body dir="rtl" ng-app="pniotApp" ng-controller="pniotCtrl">
  <input id="uploadFile" type="file" class="filestyle" data-classButton="btn btn-primary"  multiple        data-input="false"  data-classIcon="icon-plus"    onchange="angular.element(this).scope().fileSelected(this)" data-buttonText="עיון...">
 <ul>
   <li ng-repeat="file in files">{{file.name}}</li>
 </ul>
</body>

＆＃13;

Answer 2

在函数外部定义$scope.files=[]的空数组。

Answer 3

由于您使用了onchange函数，因此它需要消化，因为它不是角度指令

＆＃13;

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
  $scope.fileSelected = function (element) {
        $scope.files = element.files;
        $scope.$digest()
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body dir="rtl" ng-app="pniotApp" ng-controller="pniotCtrl">
  <input id="uploadFile" type="file" class="filestyle" data-classButton="btn btn-primary"  multiple        data-input="false"  data-classIcon="icon-plus"    onchange="angular.element(this).scope().fileSelected(this)" data-buttonText="עיון...">
 <ul>
   <li ng-repeat="file in files">{{file.name}}</li>
 </ul>
</body>

＆＃13;

ng-repeat不查看数据

3 个答案: