I am getting from server side, data along with filename, the problem is, the filename is with extension for example 1125495.jpg or 533123.png, in my application I am trying to get the thumbnail for this image, which is stored in the server as 1125495-160x160.jpg and 533123-160x160.png
Is this I can do using filter or should I ask for modification in the server side ?
You can do like this
var app = angular.module('starter', []);
app.filter('thumbnail', function() {
return function(input) {
var parts = input.split(".");
var file = parts[0]+"-"+"160x160"+"."+parts[1];
return file;
};
});
app.controller('MainCtrl', function($scope, $filter) {
$scope.files = [
"1125495.jpg",
"533123.png"
];
});
Check this codepen http://codepen.io/anon/pen/LExayW
myimage.hd.jpg because your filter will return myimage-160x160.hd. I think it would be better if after split the string you append the thumb size to the second to last part: parts[parts.length-2]+="-160x160" and then simply join the parts: var file = parts.join('.');yes you can use the angularjs $filter here
create a filter which accepts the images array, and a argument for thumbnail name, and iterate through the array and create the thumbnail name and return the thumbnail array
app.filter("fileNameFilter", function() {
return function (input, thumbnail) {
var thumbnailArray = [];
angular.forEach(input , function(value, key) {
var parts = value.split(".");
var thumb_name = parts[0]+"-"+thumbnail+"."+parts[1];
thumbnailArray .push(thumb_name);
});
return thumbnailArray ;
}
});
in controller u can call the filter as,
app.controller('MainCtrl', function($scope, $filter) {
$scope.files = [
"1125495.jpg",
"533123.png"
];
$scope.filteredFiles = $filter('fileNameFilter')($scope.files, "160x160");
});
here is the Demo Plunker
update
if your images in like
$scope.files = [
{name : "name1" , image : "1125495.jpg"},
{name : "name2" , image : "533123.png"}
];
the you can change the filter like
app.filter("fileNameFilter", function() {
return function (input, thumbnail) {
var thumbnailArray = [];
angular.forEach(input , function(value, key) {
var parts = value.image.split("."); // value.image
var thumb_name = parts[0]+"-"+thumbnail+"."+parts[1];
thumbnailArray .push(thumb_name);
});
return thumbnailArray ;
}
});
here is the Demo Plunker
And the my concerns is send the thumbnail name from the server-side. seems like much cleaner
