[英]Filtering on object property with checkbox with AngularJS
我有一个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>
到目前为止,当我选中该复选框时,它将正确过滤结果,但是当我取消选中时,它将根本不显示任何结果(当应该显示所有结果时)。
我想念什么?
您面临的问题如下:
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">
看看这个演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.