Javascript 过滤文件夹中的文件并使用ng repeat（JS，Angular）显示它们

因此，我有一些文件夹

归档文件

，其中包含未知数量的文件，我知道：

所有文件都有.7z扩展名

一半以字母AB开头，另一半以-CD开头

所以文件夹的内容看起来像：

ab12345678890.7z

AB2345678901.7z

cd12345678890.7z

CD2345678901.7z等等。也就是说，我可以这样做：

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

---

点击它将开始下载名为AB1234567890.7z的存档文件。没关系，但显然我不能写这样的链接，必须用

ng repeat

完成。因此问题是-如何显示两个链接列表，其中第一个列表是以

AB

开头的链接列表，第二个列表分别以

CD

开头。任何帮助都将不胜感激：）

我想这会对你有所帮助

<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'
     ];

   }
})();

（功能（）{
"严格使用",；
有棱角的
.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']））
.controller（'AppCtrl'，AppCtrl）；
函数AppCtrl（$scope$log）{
$scope.archivesAB=[
“AB1234567890.7z”，
“AB2345678901.7z”
];
$scope.archivesCD=[
“CD1234567890.7z”，
“CD2345678901.7z”
];
}
})();

---

这是工作指南

我想这会对你有所帮助

<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'
     ];

   }
})();

（功能（）{
"严格使用",；
有棱角的
.module（'MyApp'，['ngMaterial'，'ngMessages'，'material.svgAssetsCache']））
.controller（'AppCtrl'，AppCtrl）；
函数AppCtrl（$scope$log）{
$scope.archivesAB=[
“AB1234567890.7z”，
“AB2345678901.7z”
];
$scope.archivesCD=[
“CD1234567890.7z”，
“CD2345678901.7z”
];
}
})();

这是工作流程

这个呢：

angular.module（'app'，[]）.controller（'test'，['$scope'，'$http'，function（$scope，$http）{
//$http（{method'GET'，url:'/getNames'}）。然后（函数（名称）{
//$scope.files=名称；
//}) 
$scope.files=['AB1234567890.7z'，
“AB2345678901.7z”，
“CD1234567890.7z”，
'CD2345678901.7z']；
$scope.startWith=函数（文件，名称）{
返回文件.indexOf（name）==0；
}
}])

第一名单

第二份名单

这个怎么办：

angular.module（'app'，[]）.controller（'test'，['$scope'，'$http'，function（$scope，$http）{
//$http（{method'GET'，url:'/getNames'}）。然后（函数（名称）{
//$scope.files=名称；
//}) 
$scope.files=['AB1234567890.7z'，
“AB2345678901.7z”，
“CD1234567890.7z”，
'CD2345678901.7z']；
$scope.startWith=函数（文件，名称）{
返回文件.indexOf（name）==0；
}
}])

第一名单

第二份名单

您是否可以将您尝试过的代码分享给大家？这将更好地澄清你的问题。其位confusing@ManojShevate我自己也不知道该怎么做-这就是为什么我在这里-从更有经验的人那里寻找提示：）据我所知，可以像

$scope.firstList=files.filter（（file）=>file.substring（0，2）==“AB”这样做

然后

ng repeat='file in firstList

…你能分享你到目前为止尝试过的代码吗？这将更好地澄清你的问题。它有点难confusing@Manoj谢瓦特：我自己也不知道如何做到这一点——这就是我来这里的原因——从更有经验的人那里寻求建议：）据我所知，它可以像

$scope.firstList=files.filter（（文件）=>file.substring（0，2）==“AB”那样执行

然后

ng repeat='file in firstList

…我不能只在controller中打印两个集合-它们是未知的！…它们可以随时更改-正如我所说的，我所知道的它们都放在文件夹

归档文件中

，一些以

AB

开头，其他-

CD

…据我所知，你无法从折叠中读取文件er使用客户端javascript作为AngularJS。但是如果您的服务器中有这些文件，您可以访问一个URL来为您返回该列表。您可以使用如下内容：$timeout（函数（）{$http.get（'URL'））。success（函数（响应）{$scope.archivesAB=response.archivesAB；$scope.archivesCD=response.archivesCD；}）；}，5000）；这将访问一个URL，每5分钟返回一次您的列表。SI不能只在controller中打印两个集合-它们是未知的！…它们可以随时更改-正如我所说的，我所知道的它们都位于文件夹

归档文件中，有些以
AB
开头，其他-
CD
…据我所知，您无法从文件夹u读取文件使用客户端javascript作为AngularJS。但是如果您的服务器中有这些文件，您可以访问一个URL来为您返回该列表。您可以使用以下内容：$timeout（函数（）{$http.get（'URL'））。success（函数（响应）{$scope.archivesAB=response.archivesAB；$scope.archivesCD=response.archivesCD；}）；}，5000）；这将访问一个URL，该URL每5秒返回一次您的列表，看起来很好，但我应该如何在controller中宣布
$scope.files
？假设它必须由服务器端从文件夹中传递…我的意思是，名称列表…@imperganablefind，您可以使用
$http
服务从服务器获取名称，然后分配retur将名称添加到
$scope.files
变量，在我的情况下。看起来不错，但我应该如何在控制器中宣布
$scope.files
？假设它必须由服务器端从文件夹中传递…我的意思是，名称列表…@impergnablefind，例如，您可以使用
$http
服务从服务器获取名称，然后分配retu在我的情况下，
$scope.files
变量的rned名称。