0
自分のデバイスのファイルブラウザからアイテムのリストを取得しました。さまざまなファイルタイプ（pdfファイル、docファイル、jpgファイルなど）に異なるアイコンを表示する必要があります。今のところ私はそれがフォルダであるかどうか、それがファイルであるかどうか、そして矢印が親フォルダに入ることを示すことができます。Ionicアプリのファイルタイプに応じてアイコンを動的に変更
ここに私のコードは次のとおりです。
<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;
});
こんにちは、ありがとう...コントローラでこれをやります。 var fileName、fileExtension; fileName = fileSystem.name;fileExtension = fileSystem.name.split（ '。'）。pop（）; console.log（fileExtension）; hoeは、htmlページでこれを角度で行うことはできますか？ –
@Fabioこれで、 '$ scope.files'にあるエントリのファイル拡張子はすでにありますか？ '$ scope.files [i] .extension = nomeExt;'のように設定して、ngClassやngSrcなどのHTMLで使用します。 – kolli
MR。ありがとうございました！！仕事...今問題はすべてのmimetypeのためのcostumアイコンを設定することです... ありがとう –