Angular.js filter search with checkbox

Question

I am doing a Angular filter search with checkbox, it is working perfect I just wanna remove or clean the results what appears in the right side.

Right now that is just possible unselecting the checkboxes from the left.

I would like the results: test1, test2 be something similar to this.

So I will be able to remove the search by click in the X

so if I click in the X will remove the selected boxes.

jsfiddle: http://jsfiddle.net/65Pyj/768/

html:

<div id="wrapper" class="toggled">
  <div ng-app="fruit">
    <div ng-controller="FruitCtrl">
      <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <input type="checkbox" ng-click="includeColour('test1')" /> Red
        </br/>
        <input type="checkbox" ng-click="includeColour('test2')" /> Orange
        </br/>
        <input type="checkbox" ng-click="includeColour('test3')" /> Yellow
        </br/>

        </ul>
      </div>
      <!-- /#sidebar-wrapper -->

      <!-- Page Content -->
      <div id="page-content-wrapper">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <p>
                Results for: {{colourIncludes}} <span class="glyphicon glyphicon-remove"></span>
              </p>

              <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">close</a>
            </div>
          </div>
        </div>
      </div>
      <!-- /#page-content-wrapper -->

    </div>
  </div>
</div>

<script>
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });

</script>

js:

'use strict'

angular.module('fruit', []);

function FruitCtrl($scope) {
  $scope.colourIncludes = [];

  $scope.includeColour = function(colour) {
    var i = $.inArray(colour, $scope.colourIncludes);
    if (i > -1) {
      $scope.colourIncludes.splice(i, 1);
    } else {
      $scope.colourIncludes.push(colour);
    }
  }

  $scope.colourFilter = function(fruit) {
    if ($scope.colourIncludes.length > 0) {
      if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
        return;
    }

    return fruit;
  }
}

css:

body {
  overflow-x: hidden;
}


/* Toggle Styles */

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: green;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}

oshell · Accepted Answer · 2016-07-12 16:45:59Z

You would normally diplay the colours within a ng-repeat and use a ng-click event. You will most likely have to adjust the checkboxes on the click event too, but you got the point.

JSFiddle

angular.module('fruit', []);

function FruitCtrl($scope) {
  $scope.colourIncludes = [];

  $scope.includeColour = function(colour) {
    var i = $.inArray(colour, $scope.colourIncludes);
    if (i > -1) {
      $scope.colourIncludes.splice(i, 1);
    } else {
      $scope.colourIncludes.push(colour);
    }
  }

  $scope.colourFilter = function(fruit) {
    if ($scope.colourIncludes.length > 0) {
      if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
        return;
    }

    return fruit;
  }
  
  $scope.removeColour = function(colour) {
    $scope.includeColour(colour);
  }
}

body {
  overflow-x: hidden;
}
.rmv{
  cursor: pointer;
}

.tag{
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* Toggle Styles */

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: green;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="wrapper" class="toggled">
  <div ng-app="fruit">
    <div ng-controller="FruitCtrl">
      <!-- Sidebar -->
      <div id="sidebar-wrapper">
        <input type="checkbox" ng-click="includeColour('test1')" /> Red
        </br/>
        <input type="checkbox" ng-click="includeColour('test2')" /> Orange
        </br/>
        <input type="checkbox" ng-click="includeColour('test3')" /> Yellow
        </br/>

        </ul>
      </div>
      <!-- /#sidebar-wrapper -->

      <!-- Page Content -->
      <div id="page-content-wrapper">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <p>
                Results for: 
                  <span ng-repeat="c in colourIncludes" class="tag">
                  {{c}}  <span class="glyphicon glyphicon-remove rmv"  ng-click="removeColour(c)"></span>
                  </span>
              </p>

              <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">close</a>
            </div>
          </div>
        </div>
      </div>
      <!-- /#page-content-wrapper -->

    </div>
  </div>
</div>

<script>
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });

</script>

mikkelrd · Accepted Answer · 2016-07-12 14:40:57Z

1

Working fiddle: http://jsfiddle.net/5ppuL67k/

You needed a ng-click on the x icon. Like so: <span class="glyphicon glyphicon-remove" ng-click="clearColours()"></span>

And a function in your controller that does something like this: $scope.clearColours = function() { $scope.colourIncludes = []; }

answered Jul 12, 2016 at 14:40

mikkelrd

4132 silver badges10 bronze badges

2 Comments

raduken Over a year ago

thank you, kinda what I looking for, will be possible to delete 1 by 1? instead all at the same time? thank you.

mikkelrd Over a year ago

Well, seeing as checkboxes are inputs, I would recommend using ng-model on them anyway, rather than click events. Then, you won't even need the function to add them to the array. Something like this: jsfiddle.net/v8p975j6 Notice the ng-repeats and the filter.

Collectives™ on Stack Overflow

Angular.js filter search with checkbox

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related