在angularJS中使用输入和下拉过滤字段
Filter fields using input and drop down in angularJS
我试图通过使用ng-repeat的json过滤。但是根据要求,我需要使用输入字段和下拉菜单来过滤数据。
下面是我的代码:Html:
<input ng-model="queryFilter" placeholder="Search"/><br>
<select ng-model="stateFilter">
<option value="0" selected>Select State</option>
<option value="City1 State1">City1 State1</option>
<option value="City2 State2">City2 State2</option>
<option value="City3 State3">City3 State3</option>
<option value="City4 State4">City4 State4</option>
</select>
<div style="background:#eee;" ng-repeat="emp in empList | filter:query">
<p style="margin-top:10px;">{{emp.organisation}}</p>
<p>{{emp.number}}</p>
<p>{{emp.location.city}} {{emp.location.state}}</p>
</div>
var testApp = angular.module("Testing",[]);
testApp.controller("empCtrl",function($scope){
$scope.queryFilter = '';
$scope.stateFilter = '';
$scope.query = function (emp) {
return emp.organisation.indexOf($scope.queryFilter)!=-1 ||
emp.number.indexOf($scope.queryFilter)!=-1 ||
emp.organisation.toLowerCase().indexOf($scope.queryFilter)!=-1 ||
emp.number.toLowerCase().indexOf($scope.queryFilter)!=-1 ||
(emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)!=-1 ;
}
$scope.empList = [
{"organisation":"Organisation1","number":"7ZDG54","location":{"city":"City1","state":"State1"}},
{"organisation":"Organisation2","number":"9D4F3G","location":{"city":"City2","state":"State2"}},
{"organisation":"Organisation3","number":"1AS2S3","location":{"city":"City3", "state":"State3"}},
{"organisation":"Organisation4","number":"4A5T7D","location":{"city":"City3","state":"State4"}},
];
$scope.orderProp="name";
});
JSFiddle:
我可以使用输入框过滤,但下拉不起作用。
注意:位置由两个参数(city和state)组成,一个州可能有多个城市。
任何帮助都是感激的。谢谢。
正如Brian指出的那样,我实现逻辑的方式存在问题。我已经解决了这个问题。
JSFiddle
`$scope.query = function (emp) {
if($scope.queryFilter == ''){
return (emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)>-1 ;
}
else if($scope.stateFilter == ''){
return (emp.organisation+" "+emp.number).toLowerCase().indexOf($scope.queryFilter.toLowerCase())!=-1;
}else{
return ((emp.organisation+" "+emp.number).toLowerCase().indexOf($scope.queryFilter.toLowerCase())!=-1)
&& ((emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)>-1);
}
}`
谢谢你的帮助
相关文章:
- 访问KendoUI中Datasource过滤对象的字段
- AngularJS:在控制器中过滤除一个字段外的所有字段
- 如何使用angular ui select过滤两个字段中的数据
- 通过使用 AngularJS 遵循 OR 运算符仅过滤对象中的特定字段
- TaffyDB,过滤同一字段 2 次(大于和小于小于)
- 角度 UI 选择仅过滤一个字段
- Sugarcrm:如何根据联系人关系字段中的类型过滤帐户
- 使用 AngularJS 中的搜索字段进行过滤
- Angular.js可过滤列表,通过选择字段和可点击地图预定义值
- AngularJS:根据内部数组对象字段进行过滤
- 使用javascript过滤多个字段
- Angular ui网格通过程序设置过滤字段并刷新.值未显示
- AngularJS并过滤一些特定字段
- 根据所选复选框和所选字段过滤阵列
- 如何在编码对象时过滤额外的字段
- 通过javascript的字符串过滤json字段
- 剑道组合框在过滤时丢失html字段
- 如何使用angular js从过滤中排除某些字段
- 在angularJS中使用输入和下拉过滤字段
- Kendo ListView -从嵌套JSON中过滤字段