2016-07-20 7 views
0

죄송합니다. 달성하려는 목표를 제대로 수행하는 방법을 잘 모르겠습니다. 대답은 간단하고 문법은 부족합니다.다른 값을 기준으로 다른 값을 기준으로 표시

저는 Angular를 통해 객체에 이미지 태그가 바인딩되어 있습니다. 객체에는 두 개의 속성이 있습니다. 하나는 "FileName"이고 이미지의 이름을 포함합니다 (예 : myimage.jpg). 다른 하나는 "FilePath"이며 여기에 문제가 있습니다. FilePath는 실제 경로를 포함하지 않으며 숫자가 있습니다. 그래서 예를 들어

= 22/이미지/ = 43/포토/등등 = 66/썸네일/

와. 그래서 내 이미지 태그에 나는 이런 식으로 뭔가하고 싶은 :

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

을하지만 FilePath를이 경로가 아니므로, 나는 그런 스위치 또는 경우 또는 컨버터/필터 유형의 같은 방식의 일종 필요 설치 그래서 번호에서 올바른 경로를 결정하고 이미지 이름까지 결혼 할 수 있습니다.

의미가 있습니까?

답변

1

숫자를 올바른 경로로 변환하여 반환하는 함수를 사용하십시오.

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>

관련 문제