Multiple selection from array in Ion-side-menu, display result in ion-list/Ion-item


#1

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


#2

@celiostat hav u completed this???I need help from you