2014-03-24 2 views
0

뷰포트를 기준으로 ng 옵션 표시를 변경하려고합니다. 다음은 모바일 (부트 스트랩 3 클래스 사용)을 숨기거나 표시하는 두 가지 선택 사용의 작동 예제입니다. select 스타일은 CSS3를 사용하는 조건부이지만 데이터를 조건부로 사용하고 싶습니다.각도로 선택시 조건부 선택 옵션

<select id="selectSearchLocation" 
    class="form-control search-location hidden-xs" 
    ng-model="vm.searchLocation" 
    ng-options="x.code as x.name +' (' + x.code + ')' for x in vm.searchLocations"> 
</select> 
<select id="selectSearchLocation" 
    class="form-control search-location visible-xs" 
    ng-model="vm.searchLocation" 
    ng-options="x.code as x.code for x in vm.searchLocations"> 
</select> 

유일한 차이점은 ng-options에서 볼 수 있습니다. 표시 형식/형식은 "변경됨"입니다. 즉, "Colorado - CO"는 searchLocations가 State 객체의 배열 인 경우 모바일에 대해 단순히 "CO"입니다.

각도로 필터를 처리 할 수 ​​있습니까?

답변

5

여러 가지 방법이 있습니다. 가장 먼저 떠오르는 것은 "as"의 리터럴 값 대신 함수를 사용하는 것입니다.

ng-options="x.code as searchDisplay(x) for x in vm.searchLocations" 

그리고 당신의 컨트롤러 :

뭔가 같은

$scope.searchDisplay = function(searchLoc) { 
    if (mobile) { 
    return searchLoc.code; 
    } 
    return searchLoc.name + ' (' + searchLoc.code + ') '; 
};