the js fiddle here works as intended for the question posted on stackoverflow
However, when I try to implement it in my ionic app, filter does not work.
here is my html :
<ion-list data-ng-controller="DishListController">
<ion-item ng-repeat= "dish in dishList | selectedDishType:selection " href="#/wmapp/dishList/{{dish.itemid}}">
<article class="item_frame">
<a class="" href="#"><img class="bookmark_icon" src="img\bookmark_plus_whitev3.png">
</a>
<img class="item_main_image" ng-src="img/{{dish.cuisineTypeIsoCode}}/{{dish.itemid}}small.jpg">
<img class="item_icon_circled" src="img/dishiconv4orangecircled.png">
<h1 class="item_name_english">{{dish.nameEnglish}}</h1>
<h2 class="item_name_local_language">{{dish.nameLocal}}</h2>
<h2 class="item_name_local_language">{{dish.dishCategory}}</h2>
<p class="item_description ">{{dish.description}}</p>
<div class="subcuisine_container_w_flag">
<span class="subcuisine_text_in_dish_pages"> | {{dish.region}}</span>
<img class="flag_in_dishpages" ng-src="img/{{dish.country}}.png">
</div>
</article><!--main article frame 1 -->
and here is my full controller.js
angular.module('wmapp.controllers', [])
.controller('wmAppController', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('dishTypeListController', function($scope) {
$scope.dishTypeList = [
{'status': 'online', 'name': 'Meat '},
{'status': 'offline', 'name': 'Soup'},
{'status': 'online', 'name': 'Fish'},
{'status': 'offline', 'name': 'Stew'},
{'status': 'offline', 'name': 'Fruits'},
{'status': 'offline', 'name': 'entree'},
{'status': 'online', 'name': 'snack'}
];
$scope.selection = [];
$scope.toggle = function (idx) {
var pos = $scope.selection.indexOf(idx);
if (pos == -1) {
$scope.selection.push(idx);
} else {
$scope.selection.splice(pos, 1);
}
$scope.dishTypeList.filter(function (dType, idx) {
return $scope.selection.indexOf(idx) != -1;
});
//calling an event to any listener with the latest selection data.
$rootScope.$emit('dishType.selectionChanged', $scope.dishTypeList.filter(function (dType, idx) {
return $scope.selection.indexOf(idx) != -1;
}).map(function (dType) {
return dType.name.toLowerCase();
}));
//calling an event to any listener with the latest selection data.
};
})
.controller('DishListController', function ($scope, $rootScope) {
//initial selection data for filtering the dishlist
$scope.selection = [];
//initial selection data for filtering the dishlist
$scope.dishList = [
{ nameEnglish: 'beef burgungdy',
nameLocal: 'boeuf bourgignon',
description: 'xxxxx',
region: 'sicile',
itemid: 'IT018',
cuisineTypeIsoCode: 'IT',
country:'France',
dishCategory: 'meat',
id: 1,
},
{ nameEnglish: 'duck liver',
nameLocal: 'foie gras',
description: 'xxxx.',
region: 'sicile',
itemid: 'IT021',
cuisineTypeIsoCode: 'IT',
country:'France',
dishCategory: 'fruit',
id: 2,
},
{ nameEnglish: 'veal stew',
nameLocal: 'blanquette de veau',
description: 'xxxxxx.',
region: 'parme',
itemid: 'IT022',
cuisineTypeIsoCode: 'IT',
country:'France',
dishCategory: 'fruit',
id: 3,
},
{ nameEnglish: 'onion soup',
nameLocal: 'soupe a loignon',
description: 'xxxxx',
region: 'vanitia',
itemid: 'IT022',
cuisineTypeIsoCode: 'IT',
imageSource: '( "img/" + dish.cuisineTypeIsoCode + "/" + dish.itemid + "small.jpg")',
country:'France',
dishCategory: 'meat',
id: 3,
}
];
//listener of the selectionChanged event and updating the selection criteria
var unbind = $rootScope.$on('dishType.selectionChanged', function (e, selection) {
$scope.selection = selection;
});
$scope.$on('$destroy', unbind);
//listener of the selecttionChanged event and updating the selection criteria
})
.controller('DishController', function($scope, $stateParams) {})
//custom filter to use in the ngrepeat which uses the selection changed data
.filter('selectedDishType', function () {
return function (dishes, dishTypes) {
console.log(dishTypes);
if (dishTypes.length > 0) {
return dishes.filter(function (dish) {
return dishTypes.indexOf(dish.dishCategory.toLowerCase()) != -1;
});
} else {
return dishes;
}
};
});
//custom filter to use in the ngrepeat
I am super stuck,
thanks for your help