CODEWITHSUNDEEP
javascriptangularjs
Tzof
Tzof

Reputation: 191

ng-repeat doesn't view the data

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?

Upvotes: 1

Views: 109

Answers (3)

phani indra
phani indra

Reputation: 243

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>

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

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>

Upvotes: 1

Sushil Bastola
Sushil Bastola

Reputation: 50

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

Upvotes: 0

Related Questions