CODEWITHSUNDEEP
angularjs
Neil K
Neil K

Reputation: 1328

Pass variable into ng-repeat filter

I'm new to Angular and I'm trying to pass a variable into the filter but I'm having no luck. It works as intended when I hard code the value but it doesn't seem to be accepting the value.

JS

var app = angular.module('footballApp', []);

app.controller("TeamCtrl", function($scope, $http){

    $http.get("clubs.php/teams").success(function (data){
        $scope.teams = data.team;
    }).error(function (){
        alert("an error has occured");
    });

  $http.get("players.php/players").success(function (data){
        $scope.players = data.player;
        console.log($scope.players);
    }).error(function (){
        alert("an error has occured");
    }); 

});

HTML

<script type="text/ng-template" id="team-single.html">
    <div class="team-box">
        <div class="badge">
            <img src="logo.png" width="100" height="100"></div>
        <div class="team-name">{{x.club_name}}</div>
        <p><b>Club Manager:</b> {{x.club_manager}}</p>
        <p><b>Ground:</b> {{x.club_ground}}</p>
        <p><b>Nickname:</b> {{x.club_nickname}}</p>
        <div class="team-p">{{x.club_info}}</div>
        <div class="key-players">
            Key Players
        </div>

        <div class="players">
            <ul class="player-list">
                <li ng-repeat="player in players | filter: { club_name: '{{player.club_name}}' }" data-toggle="modal" data-target="#{{player.id}}">{{player.player_name}}</li>
            </ul>
        </div>
    </div>
</script>


<div class="row teams" ng-controller="TeamCtrl">
    <div class="container">
        <div class="col-md-4" ng-repeat="x in teams" ng-include="'team-single.html'"></div>
    </div>

</div>

Everything works fine apart from the part where I use ng-repeat with a filter to filter the list that shows by club_name. Can anyone tell me where I'm going wrong?

Upvotes: 2

Views: 3512

Answers (1)

Gene
Gene

Reputation: 616

The variable doesn't need to be in curly braces.

<ul class="player-list">
                <li ng-repeat="player in players | filter: { club_name: player.club_name }" data-toggle="modal" data-target="#{{player.id}}">{{player.player_name}}</li>
            </ul>

e.g. player.club_name instead of '{{player.club_name}}'

Upvotes: 2

Related Questions