我是AngularJs的初学者，我有一个json对象
private void selectDate() {
final DatePickerDialog datePickerDialog = new DatePickerDialog(getActivity(),
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
datepicker = new DatePicker(getActivity());
datepicker.init(year, monthOfYear + 1, dayOfMonth, null);
}
}, mYear, mMonth, mDay);
if (datepicker != null) {
datePickerDialog.updateDate(datepicker.getYear(), datepicker.getMonth() - 1, datepicker.getDayOfMonth());
}
datePickerDialog.show();
}
带有过滤器输入的简单HTML表
[
{
"id": 1,
"name": "ASP.net",
"description": "ASP.net Course",
"cost": 3000,
"areaId": 1,
"addedDate": "2017-11-29T16:58:57.0751079",
"deleted": false,
"modifiedDate": "2017-12-11T15:36:32.0780015",
"area": {
"id": 1,
"areaName": "Programming",
"areaDescription": "Software Development Courses",
"addedDate": "2017-11-29T16:58:57.0744734",
"deleted": false,
"modifiedDate": "2017-11-29T16:58:57.0746376"
}
},
{
"id": 2,
"name": "PHP",
"description": "PHP Tutorial",
"cost": 3000,
"areaId": 1,
"addedDate": "2017-11-29T16:58:57.0751088",
"deleted": false,
"modifiedDate": "2017-12-14T12:41:06.8059371",
"area": {
"id": 1,
"areaName": "Programming",
"areaDescription": "Software Development Courses",
"addedDate": "2017-11-29T16:58:57.0744734",
"deleted": false,
"modifiedDate": "2017-11-29T16:58:57.0746376"
}
},
{
"id": 15,
"name": "JAVA",
"description": "JAVA Tutorial",
"cost": 3000,
"areaId": 1,
"addedDate": "2017-12-05T10:28:59.5280719",
"deleted": false,
"modifiedDate": "2017-12-05T10:28:59.5280713",
"area": {
"id": 1,
"areaName": "Programming",
"areaDescription": "Software Development Courses",
"addedDate": "2017-11-29T16:58:57.0744734",
"deleted": false,
"modifiedDate": "2017-11-29T16:58:57.0746376"
}
}]
最后JS代码
<table>
<tr>
<td>
<span class="label label-primary" style="font-size:large"> Search By :</span>
</td>
<td>
<select ng-model="app.queryByValue" class="dropdown form-control input-sm" id="ddlseach">
<option ng-repeat="x in app.queryByDll" ng-value="x.id">{{x.name}}</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class='wrapper'>
<input ng-model="app.query[app.queryByValue]" class="input-sm form-control" id="txtsrch1" placeholder=" -- Search --" />
<!--<input ng-model="app.query.area.areaName" class="input-sm form-control" id="txtsrch2" placeholder=" -- Search --" style="visibility:hidden" />-->
</div>
</td>
</tr>
</table>
<table class="table table-condensed">
<tr style="cursor:pointer">
<th ng-click="predicate = 'id'; reverse=!reverse">
Id
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='id',
'fa fa-arrow-up' : !reverse && predicate==='id',
'arrow-not-sorted': predicate!=='id'}"></i>
</th>
<th ng-click="predicate = 'area.areaName'; reverse=!reverse">
Area
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='area.areaName',
'fa fa-arrow-up' : !reverse && predicate==='area.areaName',
'arrow-not-sorted': predicate!=='area.areaName'}"></i>
</th>
<th ng-click="predicate = 'name'; reverse=!reverse">
Name
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='name',
'fa fa-arrow-up' : !reverse && predicate==='name',
'arrow-not-sorted': predicate!=='name'}"></i>
</th>
<th ng-click="predicate = 'description'; reverse=!reverse">
Description
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='description',
'fa fa-arrow-up' : !reverse && predicate==='description',
'arrow-not-sorted': predicate!=='description'}"></i>
</th>
<th ng-click="predicate = 'cost'; reverse=!reverse">
Cost
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='cost',
'fa fa-arrow-up' : !reverse && predicate==='cost',
'arrow-not-sorted': predicate!=='cost'}"></i>
</th>
<th ng-click="predicate = 'modifiedDate'; reverse=!reverse">
Last Modified Date
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='modifiedDate',
'fa fa-arrow-up' : !reverse && predicate==='modifiedDate',
'arrow-not-sorted': predicate!=='modifiedDate'}"></i>
</th>
<th ng-click="predicate = 'deleted'; reverse=!reverse">
Deleted ?
<i ng-class="{'fa fa-arrow-down' : reverse && predicate==='deleted',
'fa fa-arrow-up' : !reverse && predicate==='deleted',
'arrow-not-sorted': predicate!=='deleted'}"></i>
</th>
<th colspan="3"><center>Action</center></th>
</tr>
<tr dir-paginate="c in app.courses | orderBy:predicate:reverse | filter:app.query | itemsPerPage:app.pageRecords">
<td>{{ c.id }}</td>
<td>{{ c.area.areaName }}</td>
<td>{{ c.name }}</td>
<td>{{ c.description }}</td>
<td>{{ c.cost }}</td>
<td><span ng-bind="c.modifiedDate | date:'MM/dd/yyyy HH:mm:ss'"></span> </td>
<td><span ng-bind="c.deleted"></span> </td>
<td class="center">
<input type="button" class="btn btn-success btn-sm " value="Update" ng-click="app.UpdateCourse(c)" />
</td>
<td class="center">
<input type="button" class="btn btn-info btn-sm" value="Soft Delete" ng-click="app.DeleteCourse(c,'soft')" />
</td>
<td class="center">
<input type="button" class="btn btn-danger btn-sm" value="Hard Delete" ng-click="app.DeleteCourse(c,'hard')" />
</td>
</tr>
</table>
数据在表格上成功显示，我可以使用除“area.areaName”之外的所有字段过滤对象
因此以下行适用于除子对象[AREA]
之外的所有字段 $http.get(WepAPI_URL).then(function (response) {
vm.courses = response.data;
vm.queryByDll =
[
{
'id': '$', 'name': 'All'
},
{
'id': 'id', 'name': 'ID'
},
{
'id':'area.areaName', 'name': 'Area'
},
{
'id': 'name', 'name': 'Name'
}, {
'id': 'description', 'name': 'Description'
}
, {
'id': 'cost', 'name': 'Cost'
}];
vm.queryByValue = vm.queryByDll[0].id;
vm.pageRecords = 5;
});
然而，当我使用这一行时
<input ng-model="app.query[app.queryByValue]" class="input-sm form-control" id="txtsrch1" placeholder=" -- Search --" />
使用区域过滤工作正常
我通过使用2个文本框进行了解决方法，当用户选择Area时，我显示txtsrch2并隐藏txtsrch1
但我相信有一个更好的解决方案让我使用一个文本框过滤所有字段，包括子对象
答案 0 :(得分：0)
It looks to me like the problem is that the area.areaName element is the only filter criteria listed two levels deep. So in your first filter attempt using app.query[app.queryByValue] you actually end up trying to filter on app.query["area.areaName"] which will not interpret the value you desire.
Based on your table rendering, I am going to assume that each object in your response will only have one area object nested inside of it (e.g., your JSON shows area as an array within each response object, but your table rendering assumes there is only one such area object). If this assumption is correct, then there are two ways you can fix your problem:
areaName as a top-level property in each response object when returned from server and then just use areaName in the filter conditionOR
areaName from inside the area array back to a top-level property in the response object and then just use areaName in the filter conditionI hope one of these solutions is feasible for you to implement.