31

In this example, I use filter in the ng-repeat, but how do I use it in a variable and ng-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}
];
Mistalis
  • 17,793
  • 13
  • 73
  • 97
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
  • i dont know why do you want to do this , simply you can do
    1. {{language.name}}
     – ngLover Jul 16 '15 at 13:38
  • I simply want to display how many languages are available, just as I display the number of total languages. I could make a function to do this and do the filtering in JavaScript but I would expect there to be a way to do this in Angular syntax in the HTML code. – Edward Tanguay Jul 16 '15 at 13:39
  • 2
    Sometimes short function in $scope is more readable than spagetti code in html. – Styx Jul 16 '15 at 13:54

3 Answers3

59

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>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
7

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/

Dmitri Algazin
  • 3,332
  • 27
  • 30
2
<div ng-if="(answerText|lowercase)=='true'">T</div>

<div ng-if="(answerText|lowercase)=='false'">F</div>

This works for me

SSD
  • 201
  • 2
  • 7