Filter files in folder and display them using ng-repeat (JS, Angular)

Question

So, I've got some folder archives that contains unknown number of files, I know that:

all of them got .7z extension

half starts with letters AB and other half - CD

So folder's content looks like:

AB1234567890.7z

AB2345678901.7z

CD1234567890.7z

CD2345678901.7z

etc. That is I can do something like this:

<a href="archives/AB1234567890.7z" download="{{fileName}}">Download</a>

And on click it's gonna start downloading archive with name AB1234567890.7z. It's okay, but obviously I can't write links like that, it must be done with ng-repeat. So the question is - how to display 2 lists of links, where first list would be list with links which starts with AB and second - which starts with CD, respectively. Any help will be greatly appreciated :)

Could you share code what you have tried till the time? that will clarify your question better. Its bit confusing — Manoj Shevate
– Manoj Shevate, Commented Nov 11, 2016 at 11:45
@Manoj Shevate I myself dunno how to perform that - that's why I'm here - looking for tips from more experienced guys :) as I understand it may be done like $scope.firstList = files.filter((file) => file.substring(0, 2) === "AB" and then ng-repeat=‘file in firstList... — impregnable fiend
– impregnable fiend, Commented Nov 11, 2016 at 11:52

Slava Utesinov · Accepted Answer · 2016-11-11 14:08:26Z

2

What about this:

angular.module('app',[]).controller('test', ['$scope', '$http', function($scope, $http){  
 //$http({ method: 'GET', url: '/getNames'}).then(function(names) {
 //    $scope.files = names;
 //}) 
  $scope.files = ['AB1234567890.7z',
                  'AB2345678901.7z',
                  'CD1234567890.7z',
                  'CD2345678901.7z'];
  $scope.startWith = function(file, name){    
      return file.indexOf(name) == 0;
  }
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='test'>
<p>First list</p>
  <div ng-repeat='file in files' ng-if="startWith(file, 'AB')">
    <a  href='archives/{{file}}'>{{file}}</a>
  </div>      
<p>Second list</p>
  <div ng-repeat='file in files' ng-if="startWith(file, 'CD')">
    <a  href='archives/{{file}}'>{{file}}</a>
  </div>
</div>

edited Nov 11, 2016 at 14:08

answered Nov 11, 2016 at 12:10

Slava Utesinov

13.5k2 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

impregnable fiend Over a year ago

looking good, but how am I supposed to announce $scope.files in controller?

impregnable fiend Over a year ago

suppose it has to be delivered by serverside from folder... I mean, list of names...

Slava Utesinov Over a year ago

@impregnablefiend, you can use, for example, $http service to get names from server and then assign returned names to $scope.files variable, at my case.

Sanfelice · Accepted Answer · 2016-11-11 11:54:33Z

0

I think this will help you

<div ng-controller="AppCtrl" layout="row" ng-cloak="" ng-app="MyApp">
  <div layout="column" flex>
      <a ng-repeat="file in archivesAB" href="archives/{{file}}" download="{{file}}">{{file}}</a>
  </div>
  <div layout="column" flex>
      <a ng-repeat="file in archivesCD" href="archives/{{file}}" download="{{file}}">{{file}}</a>
  </div>
</div>

(function () {
  'use strict';
   angular
     .module('MyApp',['ngMaterial', 'ngMessages',  'material.svgAssetsCache'])
     .controller('AppCtrl', AppCtrl);

   function AppCtrl ($scope, $log) {
     $scope.archivesAB = [
       'AB1234567890.7z',
       'AB2345678901.7z'
     ];

     $scope.archivesCD = [
       'CD1234567890.7z',
       'CD2345678901.7z'
     ];

   }
})();

And here is the working codepen

answered Nov 11, 2016 at 11:54

Sanfelice

1232 silver badges7 bronze badges

3 Comments

impregnable fiend Over a year ago

I can't just print two collections in controller - they are unknown!... And they can change any time - like I said all I know that they lay in folder archives and some starts with AB, others - CD...

Sanfelice Over a year ago

As far as I know you can't read files from a folder using client side javascript as AngularJS. But if you have this files in your server you could just access a URL that return that list for you.

Sanfelice Over a year ago

You could use something like this: $timeout(function () { $http.get('url').success(function(response){ $scope.archivesAB = response.archivesAB; $scope.archivesCD = response.archivesCD; }); }, 5000); This would access a URL that return your lists every 5s

Collectives™ on Stack Overflow

Filter files in folder and display them using ng-repeat (JS, Angular)

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related