使用 angularjs 过滤文件名

Question

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

这是我可以使用过滤器来做还是我应该在服务器端要求修改？

Answer 1

是的，您可以在此处使用 angularjs $filter

创建接受图像数组和缩略图名称参数的过滤器，并遍历数组并创建缩略图名称和return缩略图数组

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

我担心的是从服务器端发送缩略图名称。看起来更干净了

Answer 2

你可以这样做

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

检查这个codepen http://codepen.io/anon/pen/LExayW

使用 angularjs 过滤文件名

Filter file name with angularjs

angularjs

ionic-framework