current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I am using a number of checkboxes to push their values to an array to be used as arguments for the filtering of a dataset.

The requirement is to:

  1. Show child filters on selection of the parent category.

  2. If parent is unchecked all its children should be unchecked (false) automatically (otherwise they will be hidden and still true)

  3. Display active filters

  4. remove active filter on click (also uncheck their corresponding checkbox programatically).

  5. Clear all filters and uncheck all checkboxes.

My current code is below, however see attached fiddle. 

$scope.IsChecked = false;
$scope.ActiveFilters = [];

$scope.clearFilters = function() {
    $scope.ActiveFilters = [];
};

$scope.ModifyFilter = function (IsChecked, Filter) {
    console.log(IsChecked);
  if (IsChecked) {
    $scope.ActiveFilters.push(Filter);
  }
  else {
    var indexz = $scope.ActiveFilters.indexOf(Filter);
    $scope.ActiveFilters.splice(indexz, 1);
  }
};

A fiddle with a semi-working demonstration is here

-- EDIT --

Further explanation: When a checkbox is checked it pushed its value to the array. if I remove this from the array by clicking on its name in the 'Active Filters' section at the bottom of the fiddle then it does not uncheck the checkbox. Neither does clicking on 'Clear Filters'.

share|improve this question
    
Can't understand what the problem... – Oleg Yudovich May 4 '15 at 13:39
    
Please see edit. Thanks – Taylorsuk May 4 '15 at 13:49
up vote 1 down vote

The problem is in your html bindings. so please post this code here. You using for "IsChecked" variable. This is local scope variable created for each iteration of loop. You not change it from your script code.

Updated html:

<body ng-app="DemoApp" ng-controller="DashboardCtrl"> 

    <div ng-repeat="group in Filters">

       <input type="checkbox" value="{{group.title}}" ng-model="CheckboxParent" />
           {{group.title}}

       <div ng-show="CheckboxParent" class="animate-show" ng-repeat="filter in group.filters">

           <input type="checkbox" class="filterChild" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter.checked,filter)"/>
                {{filter.name}} 
       </div>
    </div>

    <div>
      <h4>Active Filters</h4>

        <p class="clear-filters" ng-click="clearFilters()">Clear Filters</p>
        <ul ng-repeat="activeFilter in ActiveFilters">
            <li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">{{activeFilter.name}}</li>
        </ul>
    </div>

</body>

Updated script:

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

app.controller("DashboardCtrl", function($scope) {

    $scope.clearFilters = function() {
        angular.forEach($scope.Filters[0].filters, function(filter) {
          filter.checked = false;
        });
        $scope.ActiveFilters = [];
    };

    $scope.IsChecked = false;
    $scope.ActiveFilters = [];

    $scope.ModifyFilter = function (IsChecked, Filter) {
        console.log(IsChecked);
      if (IsChecked) {
        $scope.ActiveFilters.push(Filter);
      }
      else {
        var indexz = $scope.ActiveFilters.indexOf(Filter);
        $scope.ActiveFilters.splice(indexz, 1);
      }
    };


    $scope.Filters = 
         [
        {
            "title": "Equipment",
            "filters": [
                { name: "Rope", checked: false },
                { name: "Cables", checked: false },
                { name: "Dowel", checked: false },
                { name: "Ball", checked: false }
            ]
        }
    ];  
});

Look into my solution on js fiddle: JsFiddle

share|improve this answer
    
I cannot link to your fiddle... – Taylorsuk May 4 '15 at 14:28
    
I have a bug or stack overflow have worst UI. I can't post link in proper way. kopy this from [] – Oleg Yudovich May 4 '15 at 14:30
    
It does not allow the filters to be removed on click. jsfiddle.net/z5sba90g/4 see here for it using buttons. – Taylorsuk May 4 '15 at 14:48
    
it works in my jsfiddle: jsfiddle.net/z5sba90g/5 – Oleg Yudovich May 4 '15 at 14:49
    
look into the fixed code – Oleg Yudovich May 4 '15 at 14:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.