Question

抱歉，我不确定如何正确地完成我想要实现的目标，尽管这主要是问题所在。我确定答案很简单，我缺乏语法......

我有一个通过Angular绑定到对象的图像标记。该对象有两个属性 - 一个是“FileName”并包含图像的名称（例如myimage.jpg）。另一个是“FilePath”，这是问题所在。 FilePath不包含实际路径，它有一个数字。例如：

22 = / images / 43 = /照片/ 66 = /缩略图/

等等。所以在我的图片标签中我想做这样的事情：

<img src="FilePath + FileName" /> (Yes I know that's not valid syntax)

但是由于FilePath不是路径，我需要某种方式，例如开关或if或转换器/过滤器类型的设置，这样我就可以从数字中确定正确的路径，然后将其结合到图像名称。

这有意义吗？

Answer 1

使用函数将数字转换为正确的路径并将其返回。

＆＃13;

angular.module('app', [])
   .controller('appCtrl', function($scope){
     $scope.imgPath = '23';
     $scope.imgSrc = 'FileName'
     $scope.getPath = function() {
       switch($scope.imgPath) {
           case '23': return '/images/'
           case '43': return '/photos/'
           case '66': return '/thumbnails/'
       }
     }
   });

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="appCtrl">
    <img ng-src="{{getPath() + imgSrc}}" />
    <h1>{{getPath() + imgSrc}}</h1>
  </body>

</html>

＆＃13;

根据Angular中的另一个值显示不同的值

1 个答案: