Question

我从服务器端获取数据以及文件名，问题是，文件名是扩展名，例如1125495.jpg或533123.png，在我的应用程序中我试图获取此图像的缩略图，这是存储在服务器中为1125495-160x160.jpg和533123-160x160.png

我可以使用过滤器吗？或者我是否应该要求在服务器端进行修改？

Answer 1

你可以这样做

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

检查此代码集http://codepen.io/anon/pen/LExayW

Answer 2

是的，你可以在这里使用angularjs $filter

创建一个接受images数组的过滤器和缩略图名称的参数，并遍历数组并创建缩略图名称并返回缩略图数组

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 ;
  }

}）;

控制器中的

你可以将过滤器调用为，

app.controller('MainCtrl', function($scope, $filter) {
  $scope.files = [
    "1125495.jpg",
    "533123.png"
  ];

  $scope.filteredFiles = $filter('fileNameFilter')($scope.files, "160x160");
});

这是Demo Plunker

<强>更新

如果您的图片在

中

$scope.files = [
  {name : "name1" , image : "1125495.jpg"},
  {name : "name2" , image : "533123.png"}
];

您可以更改过滤器，如

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 ;
  }

}）;

这是Demo Plunker

我的顾虑是从服务器端发送缩略图名称。看起来更清洁

使用angularjs过滤文件名

2 个答案: