使用AngularJS复选框过滤对象属性
Filtering on object property with checkbox with AngularJS
我有一个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>
到目前为止,当我选中复选框时,它会正确地过滤结果,但当我取消选中时,它将根本不显示结果(当它应该显示所有结果时)。
我错过了什么?
您面临的问题如下:
- 首先,CCD_ 1是CCD_
- 第一次单击复选框时,该值将更改为
true
- 如果再次单击,该值将更改为
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
相关文章:
- 如何从对象的原型方法访问JavaScript对象属性
- 如何将数组项添加到对象属性中
- 设置嵌套对象属性的更好方法
- JavaScript管理具有重复属性名称的对象属性
- 如何使用element.myobj.prop等具有对象属性的元素
- 如何使用(this)访问Angular 2 http rxjs catch函数中的对象属性
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 如何在AngularJS工厂中正确声明对象属性
- 如何使用object.assign()从其他对象引用基本对象属性
- 使用XPath样式访问Javascript JSON对象属性
- 将javascript对象(属性+值)合并到一个对象中
- 数组:使对象属性成为数组键
- 无法从JavaScript中的函数调用对象属性
- Google Closure Advanced |无法识别对象属性|动态属性
- Javascript从匿名函数访问外部对象属性
- 从函数更改对象属性
- 如何从字符串变量访问对象属性
- 从嵌套对象属性中获取排除某个值的最高值
- 在Aurelia computeds中,当设置依赖关系时,如何声明对对象属性的依赖关系
- 传递数量不确定的可能嵌套的对象属性