CODEWITHSUNDEEP
angularjs
TMH
TMH

Reputation: 6246

Ng-repeat filter by the current iteration value

Is it possible to do a simple filter, something like this?

<div col ng-repeat="v in venues | filter:v.matches.loose">

So it will only repeat this row if the value of v.matches.loose is true?

I have a few different cases where this would be useful and I don't want to have to define an app.filter('... for each case I need.

EDIT: Full HTML to repeat

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-repeat="v in venues|filter:{matches.loose:true}">

            <div row>
                <div col lg="4" md="4">
                    {{v.name}}        
                </div>
                <div col lg="4" md="4">
                    Loose match: <span ng-show="v.matches.loose">Yes</span><span ng-hide="v.matches.loose">No</span>
                </div>
                <div col lg="4" md="4">
                    Strict match: <span ng-show="v.matches.strict">Yes</span><span ng-hide="v.matches.strict">No</span>
                </div>

            </div>
        </div>

Upvotes: 0

Views: 84

Answers (2)

JMK
JMK

Reputation: 28059

An alternative to the above answer would be to use ng-if, like so:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-repeat="v in venues">
    <div ng-if="v.matches.loose === true">
        <div row>
            <div col lg="4" md="4">
                {{v.name}}        
            </div>
            <div col lg="4" md="4">
                Loose match: <span ng-show="v.matches.loose">Yes</span><span ng-hide="v.matches.loose">No</span>
            </div>
            <div col lg="4" md="4">
                Strict match: <span ng-show="v.matches.strict">Yes</span><span ng-hide="v.matches.strict">No</span>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

mpm
mpm

Reputation: 20155

<div col ng-repeat="v in venues | filter:{matches.loose:true} ">

should work if your code match the following structure : 

<script src="//cdn.jsdelivr.net/angularjs/1.2.9/angular.min.js"></script>

<body ng-app ng-controller="Main">
    <div ng-repeat="v in venues|filter:{match.loose:true}">
        {{v.name}}
    </div>
    <script>
        function Main($scope) {
            $scope.venues= [{
                match: {
                    loose: true
                },
                name: "foo"
            }, {
                match: {
                    loose: false
                },
                name: "bar"
            }, ]
        }
    </script>
</body>

proof :

http://jsfiddle.net/camus/8Lx96/1/

Upvotes: 1

Related Questions