How to use filter in ng-if and variable?
35,840
Solution 1
Can you try this?
<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>
Solution 2
Just to update previous answer, no need to filter three times, create new variable 'filtered' on first filter:
<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/
Solution 3
<div ng-if="(answerText|lowercase)=='true'">T</div>
<div ng-if="(answerText|lowercase)=='false'">F</div>
This works for me
Author by
Angry Dan
web/software developer, .NET, C#, WPF, PHP, software trainer, English teacher, have philosophy degree, love languages, run marathons my tweets: http://www.twitter.com/edward_tanguay my runs: http://www.tanguay.info/run my code: http://www.tanguay.info/web my publications: PHP 5.3 training video (8 hours, video2brain) my projects: http://www.tanguay.info
Updated on August 30, 2020Comments
-
Angry Dan over 3 years
In this example, I use filter in the
ng-repeat
, but how do I use it in a variable andng-if
, something like:{{languages.length | filter: {available: true}}}
and
ng-if="languages.length == 0 | filter: {available: true}"
See Fiddle.
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>
AngularJS
$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} ];