반응형
ng-if 및 variable에서의 필터 사용방법
이 예에서는 에서 필터를 사용하고 있습니다만, 변수에서 필터를 사용하는 방법 및ng-if
, 예를 들어 다음과 같습니다.
{{languages.length | filter: {available: true}}}
그리고.
ng-if="languages.length == 0 | filter: {available: true}"
「Feeld」를 참조해 주세요.
HTML
<div ng-controller="mainController">
<div>There are {{languages.length}} languages in total.</div>
<div>??? There are {{languages.length}} languages available.</div>
<div ng-if="languages.length == 0">??? Sorry, there are no languages available.</div>
<ol>
<li ng-repeat="language in languages | filter: {available: true}">{{language.name}}</li>
</ol>
</div>
각도 JS
$scope.languages = [
{id:1, name:"German", available: false},
{id:2, name:"English", available: true},
{id:3, name:"French", available: false},
{id:4, name:"Italian", available: true},
{id:5, name:"Spanish", available: false}
];
이거 한번 먹어볼래?
<div ng-controller="mainController">
<div>There are {{languages.length}} languages in total.</div>
<div>There are {{(languages|filter:{available:true}).length}} languages available.</div>
<div ng-if="(languages|filter:{available:true}).length == 0">Sorry, there are no languages available.</div>
<ol>
<li ng-repeat="language in languages | filter: {available: true}">{{language.name}}</li>
</ol>
</div>
이전 답변을 업데이트하기 위해 세 번 필터링할 필요가 없으며 첫 번째 필터에 새 변수 '필터링됨'을 생성할 필요가 없습니다.
<div ng-controller="mainController">
<div>There are {{languages.length}} languages in total.</div>
<div>There are {{(filtered = (languages|filter:{available:true})).length}} languages available.</div>
<div ng-if="filtered.length == 0">Sorry, there are no languages available.</div>
<ol>
<li ng-repeat="language in filtered">{{language.name}}</li>
</ol>
filtered=[{{filtered}}]
</div>
http://jsfiddle.net/to7z06ma/18/
<div ng-if="(answerText|lowercase)=='true'">T</div>
<div ng-if="(answerText|lowercase)=='false'">F</div>
난 이거면 돼
언급URL : https://stackoverflow.com/questions/31455567/how-to-use-filter-in-ng-if-and-variable
반응형
'bestsource' 카테고리의 다른 글
새 사용자가 생성/등록될 때 트리거되는 액션 후크는 무엇입니까? (0) | 2023.03.25 |
---|---|
React JS 상태 vs 프로펠러 (0) | 2023.03.25 |
How to change props to state in React Hooks? (0) | 2023.03.25 |
Wordpress 사용자 지정 위젯 이미지 업로드 (0) | 2023.03.25 |
부모에서 자녀로 이벤트를 내보내는 방법 (0) | 2023.03.25 |