Create searching filter array from checkbox (Ionic Framework)

Question

I want to create the searching filter from checkbox. So if I have checked steak and pizza filter then all the food with tags steak or pizza are shown in the list.

The problem is in the function that push tags to searchFilter array, when i check the tags 'pizza' the size array is zero then after push it is 1, but when I check other tags 'steak' the size array is still 0 then after push it is 1.

This is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ion-list>
    <ion-item ng-controller="FoodsCtrl" class="list card" ng-repeat="tag in tags">
        <div class="item item-head">
            <ion-checkbox ng-model="filter.checked" class="checkbox-energized" ng-change="addTag(tag)">{{tag.name}}</ion-checkbox>
        </div>
    </ion-item>
<ion-list>
</body>
</html>

Controller:

 $scope.searchFilters = [];
    $scope.addTag = function(tag) {

        var check = $scope.filter.checked;
        if(check)
        {
            alert('-' + $scope.searchFilters.length);
            $scope.searchFilters.push({
                name: tag.name
            });
            alert($scope.searchFilters.length);
        }
        else
        {
            var index = $scope.searchFilters.indexOf(tag.name);
            alert(index);
            if (index > -1) {
                $scope.searchFilters.splice(index, 1);
            }
            alert($scope.searchFilters.length);
        }
    };

Thanks.

Davide Pastore · Accepted Answer · 2015-12-27 11:25:17Z

You can simplify your code.

$scope.changeTag can filter all the checked tags (see also view.html) and push them in $scope.searchFilters. This will handle all different cases, without caring if an element is already in the array or not.

controller.js

$scope.tags = [
  {
    name: "Steak"
  },
  {
    name: "Pizza"
  }
];

$scope.searchFilters = [];
$scope.filter = [];

$scope.changeTag = function(tag) {
    console.log("Change tag", tag);
    var enabledTags = $filter('filter')($scope.tags, {checked: true});
    $scope.searchFilters = [];
    angular.forEach(enabledTags, function(tag){
      $scope.searchFilters.push(tag.name);
    });

    console.log("$scope.searchFilters", $scope.searchFilters);
};

view.html

<ion-list>
  <ion-item class="list card" ng-repeat="tag in tags">
      <div class="item item-head">
          <ion-checkbox ng-model="tag.checked" class="checkbox-energized" ng-change="changeTag(tag)" checked="item.checked">{{tag.name}}</ion-checkbox>
      </div>
  </ion-item>
<ion-list>

the_mahasagar · Accepted Answer · 2015-12-27 11:27:00Z

just check may be ng-repeat and ng-controller are assign to ion-item,so it might get initailize..! try this way

html :

<ion-content ng-controller="FoodsCtrl" >
<ion-list>
  <ion-item  class="list card" ng-repeat="tag in tags">
    <div class="item item-head">
      <ion-checkbox ng-click="addTag(tag)"
                    class="checkbox-energized"
                    >{{tag.name}}</ion-checkbox>
    </div>
  </ion-item>
  <ion-list>

controller:

 $scope.searchFilters = [];
$scope.addTag = function(tag) {
  var index  = $scope.searchFilters.indexOf(tag.name);
  if(index === -1)
  {
     $scope.searchFilters.push( tag.name);
  }else{
    $scope.searchFilters.splice(index, 1);
  }
  console.log("$scope.searchFilters after: "+JSON.stringify($scope.searchFilters));
};

hope it helped in some way..!

Collectives™ on Stack Overflow

Create searching filter array from checkbox (Ionic Framework)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related