Angular.js使用复选框过滤搜索

Question

我正在使用复选框进行角度过滤搜索，它工作正常我只想删除或清除右侧显示的结果。

现在可以取消选中左侧的复选框。

我想结果：test1，test2与此类似。

所以我可以点击 X

删除搜索

• 因此，如果我点击 X 将删除所选的框。

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

HTML：

57

JS：

-48

的CSS：

reduce

Answer 1

工作小提琴：http://jsfiddle.net/5ppuL67k/

x图标上需要ng-click。像这样： <span class="glyphicon glyphicon-remove" ng-click="clearColours()"></span>

控制器中的一个函数可以执行以下操作： $scope.clearColours = function() { $scope.colourIncludes = []; }

Answer 2

您通常会在ng-repeat范围内显示颜色并使用ng-click事件。您很可能也必须调整点击事件的复选框，但您明白了。

<强> JSFiddle

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;