Угловая JS фильтр таблицы не работает для вложенных объектов

Question

у меня есть массив объектов, как -

$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> 

Он работает хорошо для имени и идентификатора, но дает странное поведение для вложенных объектов типа - config.hname и config.processID. для них он работает в первый раз, и после этого он не работает.

Любая идея на этом?

Answer 1

Ну, фильтры AngularJS работают только на массивах (массив объектов в вашем случае.), А не на объектах. Обратитесь к этому question