Currently, I am in the process of experimenting with Angular. I am able to retrieve some data from the controller and successfully apply a filter when passing it as a string. However, I encounter issues when attempting to use a variable for the filter instead. Strangely, the variable displays correctly when directly called in the HTML code. I have provided both the HTML and JS snippets below. Although I acknowledge that I may be making a minor mistake somewhere, I'm unable to pinpoint exactly where.
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"
]
}]
If anyone could provide assistance, it would be greatly appreciated. There might be a more efficient way to achieve my objective, but for now, I'd like to proceed step by step. My current aim is to ensure this functionality works properly. Subsequently, I plan to refine it further by displaying only the 'famMember' corresponding to the clicked 'name'.