ng-repeat doesn't view the data

Question

I have a file upload button, after uploading I want the selected file names to appear in the row below, using Angular ngRepeat, But the list does not appear.
Here my Code:

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>

If I try to check the value of the $scope.files I get in the console the file name

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

What can be the reason that in the the list doesn't appear?

define $scope.files = [] above your fileselcted function.

Gaurav Srivastava
– Gaurav Srivastava

2017-07-31 07:48:21 +00:00
Commented Jul 31, 2017 at 7:48 — Gaurav Srivastava
– Gaurav Srivastava, Commented Jul 31, 2017 at 7:48
It's work!!Thanks!!!!!

Tzof
– Tzof

2017-07-31 07:50:40 +00:00
Commented Jul 31, 2017 at 7:50 — Tzof
– Tzof, Commented Jul 31, 2017 at 7:50

Gaurav Srivastava · Accepted Answer · 2017-07-31 07:53:14Z

You forgot to define $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>

Sushil Bastola · Accepted Answer · 2017-07-31 07:52:56Z

0

Define the empty array of $scope.files=[] outside the function.

answered Jul 31, 2017 at 7:52

Sushil Bastola

508 bronze badges

Comments

phani indra · Accepted Answer · 2017-07-31 08:19:07Z

As you have used onchange function you need to digest as it is not a angular directive

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

<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>

Collectives™ on Stack Overflow

ng-repeat doesn't view the data

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related