Угловой фильтр не работает с несколькими значениями

Question

Я не могу получить свое поле поиска для фильтрации моих данных из моего .json-файла ниже. Как только я начну печатать в полях поиска, все элементы исчезнут.

Вот мой json-файл, который работает как моя база данных.

[{ 
    "id": 1, 
    "userId": 1, 
    "firstName": ["Jack", "text"], 
    "lastName": ["Rackum", "text"], 
    "phone": ["33221122", "tel"] 
}, { 
    "id": 2, 
    "userId": 1, 
    "firstName": ["Ellery", "text"], 
    "lastName": ["Queen", "text"] 
}, { 
    "id": 3, 
    "userId": 1, 
    "firstName": ["Minnie", "text"], 
    "lastName": ["Mouse", "text"] 
}] 

А вот файл мои взгляды на передний конец

<div class="input"> 
    <input type="text" placeholder="Søg" ng-model="query.$"> 
    <i class="icon"></i> 
</div> 


<div class="item" ng-repeat="child in children | filter:query"> 
    <img class="image" src="images/children/1.jpg"> 
    <div class="content" > 
      <div class="header"> 
      <a> 
        {{ child.firstName[0] }} {{ child.lastName[0] }} 
      </a> 
     </div> 
    </div> 
</div> 

И подам controllers.js

angular.module('ContactsApp') 
    .controller('ListController', function ($scope, Contact) { 
     $scope.children = Contact.query(); 
     $scope.fields = ['firstName', 'lastName']; 

     $scope.firstname = ['firstName']; 
     $scope.lastname  = ['lastName']; 
     $scope.phone  = ['phone']; 
    }); 

И, наконец, подать мои заводы

angular.module('ContactsApp') 
    .factory('Contact', function ($resource) { 
     return $resource('/api/child/:id', { id: '@id' }, { 
      'update': { method: 'PUT' } 
     }); 
    }); 

Answer 1

Похоже, что фильтры не работают с se сгибание внутри массивов. Возможно, вам придется изменить структуру данных.

Вот Plunker: http://plnkr.co/edit/pC0W6YwhTB9l0CUaZWy0?p=preview

Вместо использования

{{child.firstName[0]}} 

Я использовал

{{child.firstName}} 

с соответствующими изменениями в данных.