Displaying different values based on another value in Angular

Question

Sorry, I'm not sure how to properly work what I want to achieve, although that's mostly the problem. I'm sure the answer is simple and I lack the grammar...

I have an image tag bound to an object via Angular. The object has two properties - one is "FileName" and contains the name of the image (e.g. myimage.jpg). The other is "FilePath" and it's the problem here. FilePath doesn't contain an actual path, it has a number. So for example:

22 = /images/ 43 = /photos/ 66 = /thumbnails/

and so on. So in my image tag I want to do something like this:

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

But since FilePath isn't a path, I need some sort of way, such as a switch or an if or a converter/filter type of setup so I can determine the correct path from the number and then marry it up to the image name.

Does that make sense?

Jake Johnson · Accepted Answer · 2016-07-20 17:45:37Z

1

Use a function to convert the number to the correct path and return it.

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/'
       }
     }
   });

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" 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>

answered Jul 20, 2016 at 17:45

Jake Johnson

1,8541 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying different values based on another value in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related