Динамически изменять значок в зависимости от типа файла в приложении Ionic

0

У меня есть список элементов из файлового браузера моего устройства, мне нужно показать разные значки для разных типов файлов - файл pdf, файл doc, файл jpg и т.д. На данный момент я могу показать, является ли это папкой или если она является файл, а стрелка - в родительскую папку.

Есть идеи? Вот мой код:

    <div class="list">
      <div ng-repeat="file in files">
  <a class="item item-icon-left" href="#" ng-click="getContents(file.nativeURL);">
  <!--<a class="item item-icon-left" href="#" ng-click="getContents(file.nativeURL);" my-on-hold="onItemHold(item)">-->

      <i class="icon" ng-class="{'icon ion-folder' : file.isDirectory, 'icon ion-document' : file.isFile, 'ion-reply' : (file.name === '[BACK]')}"></i>
    <!--  <i class="icon" ng-class="{'icon ion-folder' : file.isDirectory, 'icon ion-document' : file.isFile, 'ion-reply' : (file.name === '[BACK]'), 'ion-compose' : (file.isFile && file.name.split('.').pop() === 'gif')}"></i>-->
  <!--      <i ng-show="file.isDirectory" class="icon ion-folder"></i>
        <i ng-show="file.isFile" class="icon ion-document"></i>-->
        {{file.name}}
        <p>Location : {{file.nativeURL}}</p>

      </a>
    </div>
  </div>

и js:

    app.controller("ExampleController", function($scope, $cordovaFile, $ionicPlatform, $fileFactory, $cordovaPrinter, $cordovaFileOpener2, $interval) {


      var fs = new $fileFactory();


      $ionicPlatform.ready(function() {
        fs.getEntriesAtRoot().then(function(result) {
          console.log("result "+ JSON.stringify(result));
          $scope.files = result;
        }, function(error) {
          console.error(error);
        });

        $scope.getContents = function(path) {
          fs.getEntries(path).then(function(result) {
            console.log("result "+JSON.stringify(result));

        //    console.log("result "+result);
        //sono i files nella cartella
            $scope.files = result;

            var nomeFile=[];
            var nomeExt=[];

            for(var i = 0; i<$scope.files.length; i++){
                nomeFile = $scope.files[i].name;
                console.log("nomeFile "+nomeFile);
                nomeExt = $scope.files[i].name.split('.').pop();
                console.log("nome estenzione "+nomeExt);

    };


    //cartella padre
            $scope.files.unshift({name: "[BACK]"});



            //funzione per trovare il padre del path corrente
            fs.getParentDirectory(path).then(function(result) {
            //  console.log("result "+result);
              console.log("result "+JSON.stringify(result));
              result.name = "[BACK]";

              $scope.files[0] = result;



            });
          }, function(error){
            console.error(error);
          });
        }


      });

    });


    app.factory("$fileFactory", function($q, $cordovaFileOpener2,$ionicGesture,$rootScope) {

      var File = function() {};

      File.prototype = {

        getParentDirectory: function(path) {
          //questa è la promise
          var deferred = $q.defer();
          //accedo al file local e prendo il path
          window.resolveLocalFileSystemURL(path, function(fileSystem) {
            fileSystem.getParent(function(result) {
              console.log("result "+JSON.stringify(result));
              deferred.resolve(result);
            }, function(error) {
              deferred.reject(error);
            });
          }, function(error) {
            deferred.reject(error);
          });
          return deferred.promise;
        },

        //per trovare tutti i file e cartelle nella root del device
        getEntriesAtRoot: function() {
          var deferred = $q.defer();
          window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
                console.log(fileSystem.name);
            var directoryReader = fileSystem.root.createReader();
            directoryReader.readEntries(function(entries) {
          //    console.log("entries "+entries);
              console.log("result "+ JSON.stringify(entries));
              deferred.resolve(entries);
            }, function(error) {
              deferred.reject(error);
            });
          }, function(error) {
            deferred.reject(error);
          });
          return deferred.promise;
        },

        //per trovare tutti i files e cartelle nel path dato
        getEntries: function(path) {
          var deferred = $q.defer();
          window.resolveLocalFileSystemURL(path, function(fileSystem) {


      console.log(fileSystem);
            console.log(fileSystem.name);
            console.log(fileSystem.nativeURL);
            var fileName, fileExtension;

            fileName = fileSystem.name;
            fileExtension = fileSystem.name.split('.').pop();
            console.log (fileExtension);



            var pathCompleto = fileSystem.nativeURL;
            $rootScope.filePrint = pathCompleto;
                    console.log ("pathCompleto "+ pathCompleto);




    console.log("fileSystem.isFile "+fileSystem.isFile);
    if(fileSystem.isFile){
                    if (fileExtension === "pdf") {

                        $cordovaFileOpener2.open(
                          pathCompleto,
                        'application/pdf'
                        ).then(function() {
                            console.log('Success');
                        }, function(err) {
                        console.log('An error occurred: ' + JSON.stringify(err));
                        });
                      }if(fileExtension === "doc") {

                            $cordovaFileOpener2.open(
                              pathCompleto,
                            'application/msword'
                            ).then(function() {
                                console.log('Success');
                            }, function(err) {
                            console.log('An error occurred: ' + JSON.stringify(err));
                            });
                          }if(fileExtension === "txt") {

                                $cordovaFileOpener2.open(
                                  pathCompleto,
                                'text/plain'
                                ).then(function() {
                                    console.log('Success');
                                }, function(err) {
                                console.log('An error occurred: ' + JSON.stringify(err));
                                });
                              }if(fileExtension === "jpeg") {

                                    $cordovaFileOpener2.open(
                                      pathCompleto,
                                    'image/jpeg'
                                    ).then(function() {
                                        console.log('Success');
                                    }, function(err) {
                                    console.log('An error occurred: ' + JSON.stringify(err));
                                    });
                                  }if(fileExtension === "jpg") {

                                        $cordovaFileOpener2.open(
                                          pathCompleto,
                                        'image/jpeg'
                                        ).then(function() {
                                            console.log('Success');
                                        }, function(err) {
                                        console.log('An error occurred: ' + JSON.stringify(err));
                                        });
                                      }if(fileExtension === "png") {

                                        $cordovaFileOpener2.open(
                                          pathCompleto,
                                        'image/png'
                                        ).then(function() {
                                            console.log('Success');
                                        }, function(err) {
                                        console.log('An error occurred: ' + JSON.stringify(err));
                                        });
                                      }if(fileExtension === "rtf") {

                                            $cordovaFileOpener2.open(
                                              pathCompleto,
                                            'application/rtf'
                                            ).then(function() {
                                                console.log('Success');
                                            }, function(err) {
                                            console.log('An error occurred: ' + JSON.stringify(err));
                                            });
                                          }
                                        }else{


            var directoryReader = fileSystem.createReader();
            console.log("directoryReader "+JSON.stringify(directoryReader));
            directoryReader.readEntries(function(entries) {
            //  console.log("entries "+entries);

            deferred.resolve(entries);
            console.log("result "+ JSON.stringify(entries));


            }, function(error) {
              deferred.reject(error);
            });
    }
          }, function(error) {
            deferred.reject(error);
          });    

          return deferred.promise;
        }

      };
      return File;     


});
Теги:
ionic-framework
list
cordova
icons

1 ответ

1

Каждый элемент массива files должен иметь параметр file.fullPath который можно проанализировать для расширения файла. Например, разделите . и проверить последнюю подстроку.

РЕДАКТИРОВАТЬ

Или используйте параметр file.name, который содержит имя файла без пути.

Затем просто установите его для каждой записи в массиве, как $scope.files[i].extension = extension; и используйте file.extension в вашем HTML с помощью директивы ngClass или ngSrc, например.

  • 1
    привет, спасибо ... я сделаю это в контроллере var fileName, fileExtension; fileName = fileSystem.name; fileExtension = fileSystem.name.split ('.'). pop (); console.log (fileExtension); но как я могу сделать это на странице HTML с угловым?
  • 0
    @Fabio Итак, у вас уже есть расширения файлов для записей в $scope.files ? Затем просто установите его как $scope.files[i].extension = nomeExt; и используйте его в своем HTML с ngClass или ngSrc, например.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню