使用AngularJS复选框过滤对象属性

Filtering on object property with checkbox with AngularJS

本文关键字:对象 属性 过滤 复选框 AngularJS 使用      更新时间:2023-09-26

我有一个ng重复列表,显示对象数组的多个属性,并可以使用输入字段对其进行筛选。

我没有做到的是实现使用复选框和特定对象的存在与否来过滤结果的可能性

基本上,我希望它在选中复选框时显示record.cancelled=true的结果,如果未选中,则显示所有结果。

这是我的HTML:

   <div class="row msf-row" 
     ng-repeat="record in recordlist | filter: search" 
     ng-class="{ 'msf-cancelled': record.cancelled}">
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-2">{{record.driver}}</div>
      <div class="col-md-2">{{record.from}}</div>
      <div class="col-md-3" ng-show="editItem == false" ng-hide="editItem">{{record.destination}}</div>
      <div class="col-md-3" ng-show="editItem == true" ng-hide="!editItem">
        <select class="form-control" ng-model="record.destination" ng-options="location.place as location.place for location in locationlist | orderBy:'place'">
          <option value="">Destination</option>
        </select> 
      </div>
      <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">{{record.pax}}</div>
      <div class="col-md-1" ng-show="editItem == true" ng-hide="!editItem">
        <select class="form-control" ng-model="record.pax">
            <option>Driver</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select>
      </div>

和当前过滤器:

    <div class="col-md-12 msf-filter">
        <div class="row">
          <form role="form">
            <div class="col-md-1 msf-date">
              <input class="form-control" placeholder="Time" ng-model="search.time">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Car" ng-model="search.car">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="Driver" ng-model="search.driver">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="From" ng-model="search.from">
            </div>
            <div class="form-group col-md-3">
              <input class="form-control" placeholder="Destination" ng-model="search.destination">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Pax" ng-model="search.pax">
            </div>
            <div class="form-group col-md-1">
              <input type="checkbox" ng-model="search.cancelled"> Cancelled 
            </div>
          </form>
        </div>
      </div>

到目前为止,当我选中复选框时,它会正确地过滤结果,但当我取消选中时,它将根本不显示结果(当它应该显示所有结果时)。

我错过了什么?

您面临的问题如下:

  1. 首先,CCD_ 1是CCD_
  2. 第一次单击复选框时,该值将更改为true
  3. 如果再次单击,该值将更改为false,因此过滤器将搜索元素,其中CCD_

解决这个问题的一种方法是对checkbox元素使用ng-change属性,如下所示:

ng-change="search.cancelled = search.cancelled ? true : undefined"

在HTML:中

<input type="checkbox" ng-model="search.cancelled" ng-change="search.cancelled = search.cancelled ? true : undefined">


查看此DEMO