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

您面临的问题如下：

起初search.cancelled为undefined。
当您第一次点击该复选框时，该值会更改为true。
如果再次点击，该值将更改为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

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

1 个答案: