angularjs - Angular.js filter search with checkbox -
i doing angular filter search checkbox, working perfect wanna remove or clean results appears in right side.
right possible unselecting checkboxes left.
i results: test1, test2 similar this.
so able remove search click in x
- so if click in x remove 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 = $.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: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 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: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 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; }
you diplay colours within ng-repeat , use ng-click event. have adjust checkboxes on click event too, got point.
angular.module('fruit', []); function fruitctrl($scope) { $scope.colourincludes = []; $scope.includecolour = function(colour) { var = $.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: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 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: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 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>
Comments
Post a Comment