Angular js表过滤器不适用于嵌套对象

时间:2015-08-17 07:00:51

标签: angularjs filter html-table

我有像 -

这样的对象数组
$scope.objs = [
    {
        'name': 'test',
        'id': '1',
        'config': {
            'processID': 3,
            'hName': 'host'
        }  
    },
    {
        'name': 'test2',
        'id': '12',
        'config': {
            'processID': 32,
            'hName': 'host2'
        }
    }
 ];

我有一个表格表示,我想在每一列上添加过滤器 -

<table>
    <thead>
       <tr>
            <th>
                Name                                    
                <span class="dropdown" dropdown on-toggle="toggled(open)">
                    <a href class="dropdown-toggle" dropdown-toggle>
                        <i title="filter" class="operation fa fa-filter"></i>
                    </a>
                    <ul id="filterPopup" class="dropdown-menu">
                        <li><input ng-model="search.name"  type="text" placeholder="filter by Name"/></li>
                    </ul>
                </span>
            </th>
            <th>
                ID
                <span class="dropdown" dropdown on-toggle="toggled(open)">
                    <a href class="dropdown-toggle" dropdown-toggle>
                        <i title="filter" class="operation fa fa-filter"></i>
                    </a>
                    <ul id="filterPopup" class="dropdown-menu">
                        <li><input ng-model="search.id" type="text" placeholder="filter by ID"/></li>
                    </ul>
                </span>
            </th>
            <th>
                ProcessID
                <span class="dropdown" dropdown on-toggle="toggled(open)">
                    <a href class="dropdown-toggle" dropdown-toggle>
                        <i title="filter" class="operation fa fa-filter"></i>
                    </a>
                    <ul id="filterPopup" class="dropdown-menu">
                        <li><input ng-model="search.config.processID"  type="text" placeholder="filter by pId"/></li>
                    </ul>
                </span>
            </th>
            <th>
                ProcessID
                <span class="dropdown" dropdown on-toggle="toggled(open)">
                    <a href class="dropdown-toggle" dropdown-toggle>
                        <i title="filter" class="operation fa fa-filter"></i>
                    </a>
                    <ul id="filterPopup" class="dropdown-menu">
                        <li><input ng-model="search.config.hname"  type="text" placeholder="filter by hname"/></li>
                    </ul>
                </span>
            </th>

       </tr>                           
    </thead>
    <tbody>
        <tr ng-repeat="obj in objs | filter:search">  
            <td>
                {{obj.name}}
            </td>
            <td>
                {{obj.id}}
            </td>
            <td>
                {{obj.config.processID}}
            </td>
            <td>
                {{obj.config.hName}}
            </td>                       
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="7">- END OF DATA -</td>
        </tr>
    </tfoot>
</table>

它适用于名称和ID,但为嵌套对象(如config.hname和config.processID)提供了一些奇怪的行为。对于他们来说,它是第一次工作,之后它不起作用。

对此有何想法?

1 个答案:

答案 0 :(得分:0)

嗯,AngularJS过滤器只能处理数组(你的情况下的对象数组)而不能处理对象。请参阅此question