过滤文件夹中的文件，并使用ng-repeat (JS, Angular)显示它们

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

本文关键字：Angular JS 显示 ng-repeat 文件夹 文件 过滤      更新时间：2023-09-26

我有一个文件夹archives包含未知数量的文件，我知道:

  • 它们都有。7z扩展名
  • 一半以字母AB开头另一半以CD

    • 所以文件夹的内容看起来像:
  • AB1234567890.7z
  • AB2345678901.7z
  • CD1234567890.7z
  • CD1234567890.7z
  • CD2345678901.7z
    • 等。我可以这样做: 
    <a href="archives/AB1234567890.7z" download="{{fileName}}">Download</a>

    点击它将开始下载名称为AB1234567890.7z的存档。这是好的，但显然我不能写这样的链接，它必须与ng-repeat。所以问题是- 如何显示链接的2个列表，其中第一个列表将是列表，链接开始于AB和第二个 -开始于CD，分别。如有任何帮助，将不胜感激:)

    这个呢:

    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>

    我想这会对你有帮助。

    <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'
     ];
   }
})();

    这里是工作代码

    相关文章：