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

Question

我有一个 ng-repeat 列表，显示对象数组的多个属性以及使用输入字段对其进行过滤的可能性。

我没有做到的是实现使用复选框过滤结果的可能性以及特定 object.property 的存在与否。

基本上我希望它在选中复选框时显示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>

到目前为止，当我选中复选框时，它会正确过滤结果，但是当我取消选中时，它根本不会显示任何结果（当它应该显示所有结果时）。

我错过了什么？

Answer 1

您面临的问题如下：

1. 起初search.cancelled 是undefined。
2. 当您第一次单击复选框时，值将更改为true。
3. 如果再次单击，值将变为false，因此过滤器会搜索 record.cancelled == false 的元素。

解决此问题的一种方法是对复选框元素使用 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