javascript - ng-repeat 不查看数据

标签 javascript angularjs

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

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
  $scope.fileSelected = function (element) {
        $scope.files = element.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>
如果我尝试检查 $scope.files 的值,我会在控制台中得到文件名

console.log($scope.files[0].name);

列表中没有出现的原因可能是什么?

最佳答案

您忘记定义 $scope.files。

var pniotApp = angular.module('pniotApp', []);
pniotApp.controller('pniotCtrl', function ($scope, $http, $location) { 
   $scope.files=[];
  $scope.fileSelected = function (element) {
        $scope.files = element.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>

关于javascript - ng-repeat 不查看数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45410083/

相关文章:

javascript - 在javaScript中查找对象数组中键的索引

javascript - 动态 iframe 高度 - 似乎需要重新加载页面

javascript - KineticJS - 创建带有渐变描边的样条线

java - Angular + Spring,$http 和 $location 获取项目名称

javascript - AngularJS:ng-checked 没有真正绑定(bind)

javascript - 如何让这段代码一次移动一个类(class)

javascript - 导航在移动网站上消失

javascript - 服务中的只读属性

javascript - 如何用浏览器默认 CSS 覆盖 Materialise CSS?

javascript - stackedgroupedChart 中的 nvd3 双 X 轴