How to use a variable in Angular filter

Question

I am busty with experimenting with Angular. I get some data from controller and like to place a filter on it. This works as i pass is as string. but if i like to use a variable, it doesnt work. The variable is showing if i directly call it in the html. I will paste html and js here. I am sure i am doing something "small" wrong here, but i dont see what.

index.html

<body ng-controller="GuestController as GuestCtrl">
          <h1 class="text-center">Guests</h1>
          <div class="btn btn-default" ng-controller="FamController as famCtrl" ng-repeat="guest in GuestCtrl.guests | filter:{name:famCtrl.fam}">
            <h3>
                {{famCtrl.fam}}  <!-- returns the right value, thats the az you see before the names -->
                {{guest.name}}
            </h3>

              <ul class="clearfix" ng-controller="FamController as famCtrl">
                <li class="small-image pull-left thumbnail" ng-repeat="famMember in guest.famMembers"> 
                    {{famMember}} 
                </li>
              </ul>
          </div>
      </body>

app.js

var app = angular.module("wedding", []);

  app.controller('GuestController', function(){
    this.guests = guests;
  });

  app.controller('FamController', function(){
    this.fam = 'az';
  });



    var guests = [
      {
        name: 'Willem & Hanneke',
        famMembers: [
          "Willem",
          "Hanneke"
        ]
      },{
        name: 'Azouz & Ria',
        famMembers: [
          "Azouz",
          "Ria",
          "Ghalil"
        ]
    }]

Any help would be appreciated. Probably there is a much better way to achieve what i like, but i like to do it in steps. My goal now is to get this working. The next goal would be to only display the fammember of the "name" i have clicked.

tapatron · Accepted Answer · 2014-09-02 22:32:40Z

1

Extract your FamController outside of the ng-repeat directive

working example http://codepen.io/anon/pen/rbEoc?editors=101

<body ng-controller="GuestController as GuestCtrl">
    <div ng-controller="FamController as famCtrl">
        ...
    </div>
</body>

answered Sep 2, 2014 at 22:32

tapatron

781 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use a variable in Angular filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related