Question

我必须在表格的5列中显示数据：

代码
列表项
在线名称
离线名称
创建日期

这部分很好。数据显示在网格/表格中。

但我必须实现基于列的搜索，其中搜索文本在文本框中提供（名为/ ng-model命名为＆＃39; query＆＃39;，plz查找组件定义下面）我必须从下拉列表中选择列的名称。我提供了我尝试过的代码。

我在jsp中的表看起来像这样：

<table  id="attrTable" class="table table-fixedheader table-striped "  >
    <thead>
    <tr>
        <th width="5%" >Select</th>
        <th width="15%" > Code</th>
        <th width="45%" > Online Name</th>
        <th width="10%" > Offline Name</th>
        <th width="10%" > Date Created</th>
        <th width="15%"> Action </th>
    </tr>
    </thead>

    <tbody style="height:700px">
    <tr ng-repeat="u in attrCtrl.allAttr| filter:attrCtrl.getSearchFilter(query)" >
        <td width="5%"><input id="{{u.id }}" type="checkbox" value="{{u.id }}" ng-checked="selection.indexOf(u.id) > -1" ng-click="attrCtrl.toggleSelection(u)" /><span></span></td>
        <td width="15%">{{ u.attrCd}}<span></span></td>
        <td width="45%">{{ u.onlineName }}<span></span></td>
        <td width="10%">{{ u.onlineName }}<span></span></td>
        <td width="10%">{{ u.insertDate }}<span></span></td>
        <td width="15%">

        </td>
    </tr>
    </tbody>
</table>

查询（表示提供搜索文本的文本框）定义为：

 <input ng-model="query"  ng-style="{'height': '24px'}" type="text"  placeholder="Search" class="filterWidth .navbar-right">

如果我直接用返回的字符串替换此函数调用，那么控制器中的 getSearchFilter函数将返回用作过滤器的硬编码字符串。如果我在上表中创建行，则表示它有效：。

<tr ng-repeat="u in attrCtrl.allAttr | filter : {onlineName:'Patty'}" >

但是如果我使用函数调用则不起作用。即使此函数返回的是完全相同的String，也可用作过滤器。 此功能如下所示：

self.getSearchFilter = function(searchText)
{
    self.filterSearch = "{onlineName:'Patty'}";

    window.alert(self.filterSearch);

    return self.filterSearch ;

}

在控制器＆＃34; attributeCtrl＆＃34;我定义了＆＃34; searchProprties ＆＃34; as：

self.searchProprties = [
    {option : "All", value : "search.$"},
    {option : "Code", value : "search.attrCd"},
    {option : "Online Name", value : "search.onlineName"},
    {option : "Offline Name", value : "search.onlineName"},
    {option : "Insert Date", value : "search.insertDate"}
];

＆＃34; attrCd＆＃34;，＆＃34; onlineName＆＃34;，＆＃34; insertDate＆＃34;是列的实际名称。

如果我使用函数调用来获取过滤器字符串，我可以告诉过滤器无法正常工作吗？

Answer 1

我可以通过在控制器上编写功能“搜索”来确保其正常工作（确保您注意到'查询'代表搜索文本框和' queryByProperty '代表图片中的下拉列表：

self.search = function( item )
{
    if( !self.query )
    {
        return true;
    }
    else if(self.queryByProperty==='attrCd' &&
        ( item.attrCd!= null && item.attrCd.toLowerCase().indexOf( self.query.toLowerCase() ) != -1 ) )
    {
        return true;
    }
    else if(self.queryByProperty==='onlineName' &&
        ( item.onlineName != null && item.onlineName.toLowerCase().indexOf( self.query.toLowerCase() ) != -1 ) )
    {
        return true;
    }
    else if(self.queryByProperty==='offlineName' &&
        ( item.offlineName != null && item.offlineName.toLowerCase().indexOf( self.query.toLowerCase() ) != -1 ) )
    {
        return true;
    }
    else if ( self.queryByProperty==='all' &&
        (( item.attrCd != null && item.attrCd.toLowerCase().indexOf( self.query.toLowerCase() ) != -1 )
        || ( item.onlineName != null && item.onlineName.toLowerCase().indexOf( self.query.toLowerCase() ) != -1 )
        || ( item.offlineName != null && item.offlineName.toLowerCase().indexOf( self.query.toLowerCase() )  != -1 ))
        )
    {
        return true;
    }
    else
    {
        return false;
    }
};

在 JSP 上，我必须在搜索框和下拉菜单上做一些小改动，以选择要搜索的列：< / p>

<input ng-model="attrCtrl.query"  ng-style="{'height': '24px'}" type="text"  placeholder="Attribute Search" class="filterWidth .navbar-right">

<select ng-model="attrCtrl.queryByProperty" ng-style="{'height': '24px'}"  >
    <option value="">Select Property</option>
    <option ng-repeat="x in attrCtrl.searchProprties" value="{{x.queryOption}}" >{{x.option}}</option>
</select>

在桌面上过滤器应该以这种方式调用（基本上我们正在寻找接收隐藏/显示列的真/假值）：

<table  id="attrTable" class="table table-fixedheader table-striped "  >
    <thead>
    <tr>
        <th width="5%" >Select</th>
        <th width="15%" > Code</th>
        <th width="45%" > Online Name</th>
        <th width="10%" > Offline Name</th>
        <th width="10%" > Date Created</th>
        <th width="15%"> Action </th>
    </tr>
    </thead>

    <tbody style="height:700px">
    <tr ng-repeat="u in attrCtrl.allAttr| filter:attributeCtrl.search " >
        <td width="5%"><input id="{{u.attributeId }}" type="checkbox" value="{{u.id }}" ng-checked="selection.indexOf(u.id) > -1" ng-click="attrCtrl.toggleSelection(u)" /><span></span></td>
        <td width="15%">{{ u.attributeCd}}  <span></span></td>
        <td width="45%">{{ u.onlineName }}  <span></span></td>
        <td width="10%" >{{ u.offlineName}} <span ></span></td>
        <td width="10%">{{ u.insertDate }}  <span></span></td>
        <td width="15%">


        </td>
    </tr>
    </tbody>
</table>

这是我在控制器上的' searchProperty '，其中下拉列表的值来自：

self.searchProprties = [
    {option : "All", queryOption : "all"},
    {option : "Code", queryOption : "attrCd"},
    {option : "Online Name", queryOption : "onlineName"},
    {option : "Offline Name", queryOption : "offlineName"},
    {option : "Insert Date", queryOption : "insertDate"},
];

Angular js：基于列的搜索不起作用

1 个答案: