2014-05-10 2 views
1

숫자에 기인 한 단어를 AngularJS로 표시해야합니다. 컨트롤러를 통해 변수 $ game.complexity를 볼 수 있으며 복잡도는 1에서 4까지의 숫자가 될 수 있습니다. 그 숫자를 단어로 표시하고 싶습니다.각도로 표시된 변수에 따라 뭔가 표시하는 방법

1 --->

2 ---> 매체

내가 처음 어쩌면 그것은 cutstom 필터와 함께 작동 것이 무슨 생각

:

var filtersModule = angular.module("ttmatchApp.Filters", []) 

filtersModule.filter("complexityFilter", function(){ 
    return function(value){ 
     switch(value) 
     { 
      case 1: 
       return "easy" 
       break; 
      case 2: 
       return "medium" 
       break; 
      case 3: 
       return "hard" 
       break; 
      case 4: 
       return "very hard" 
       break; 

     } 

    } 
}) 

과 같이 호출 :

<p>{{game.complexity | complexityFilter}} complexity</p></div> 

내가 제어기 내에 $scope.game을 정의하고 난 JSON 파일을 통해 필요한 데이터를 제공 :

<p>{{game.complexity | complexityFilter:game.complexity}} complexity</p></div> 
은 또한 이런 식으로 시도. game.name과 같은 다른 범위 요소가 잘 작동하고 표시됩니다.

filtersModule도 주 모듈에 연결됩니다.

필터를 컨트롤러에 도입해야합니까?

잘못된 방법을 사용하고 있습니까?

답변

0

game.complexity가 표현식에서 평가되면 문자열로 출력됩니다. 즉, 스위치 케이스가 정수가 아닌 문자열에 있어야합니다 (예 : 1 대신 "1").

편집 : 잘못되었습니다. 표현식이 문자열로 평가되었지만 필터가 여전히 해당 표현식 내에 있습니다. , 그것은 여전히 ​​number로 game.complexity를받습니다. 문제는 의견에서 해결 한 것이 었습니다.

+0

나는 그것을 실제로 시도했지만 아무 것도 표시하지 않습니다. 그리고 필터에 뷰의 값을 보내야합니까? 두 가지 방법 중 어느 것이 올바른 것입니까? – bumbledy

+0

두 번째 형식이 올바른 것입니다. 추가 매개 변수가있는 경우 첫 번째 양식 에서처럼 ':'를 사용하여 전달할 수 있지만 단 하나만 사용할 수 있습니다. 당신의 문제를 보여주는 plunker \ jsfiddle을 넣으시겠습니까? – haimlit

+0

plunkr에서 단순화 된 코드를 만들었고 작동합니다 ...하지만 여전히 내 코드에는 포함되지 않습니다. 나는 연결되지 않은 물건을 찾으려고 노력할 것이다 – bumbledy

관련 문제