список Фильтр объектов с флажками

Question

Я пытаюсь отфильтровать список по id недвижимости с флажками на основе следующих данных ..

var events = [ 
    { 
    person: { 
     first_name: "Joe", 
     last_name: "Smith", 
     id: 1 
    }, 
    something: "else" 
    }, 
    { 
    person: { 
     first_name: "Jane", 
     last_name: "Doe", 
     id: 2 
    }, 
    something: "else" 
    }, 
    { 
    person: { 
     first_name: "Joe", 
     last_name: "Smith", 
     id: 1 
    }, 
    something: "else" 
    }, 
    { 
    person: { 
     first_name: "Jane", 
     last_name: "Doe", 
     id: 2 
    }, 
    something: "else" 
    }, 
]; 

И еще один объект со списком всех людей;

var people = [ 
    { 
    first_name: "Joe", 
    last_name: "Smith" 
    id: 1 
    }, 
    { 
    first_name: "Jane", 
    last_name: "Doe" 
    id: 2 
    }, 
]; 

Таким образом, выход всех событий будет:

<ul> 
    <li ng-repeat='event in events'> 
    {{ event.person.first_name }} 
    </li> 
</ul> 

И флажками, которые представляют каждый человек будет:

<ul> 
    <li ng-repeat='person in people'> 
    {{ person.first_name }} 
    <input type="checkbox" ng-click="filter(person.id)"/> 
    </li> 
</ul> 

При нажатии на флажок, я ожидаем отфильтровать список на основе id. Поэтому я использую подчеркивание для фильтрации:

$scope.filter = function(personID) { 
     $scope.events = _.filter($scope.events, function(value){ 
     return value.person.id === personID; 
     }); 
}; 

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

1. On load, everyone appears on the screen 
2. When I check the "Joe" checkbox, the list only shows "Joe" 
3. When I uncheck the "Joe" checkbox, the list resets to all. 

Answer 1

Проблема кода

Элементы $scope.events только не уменьшаются, и никогда не увеличится, потому что ваш код ниже.

$scope.events = _.filter($scope.events 

Мое предложение

Если бы вы могли принять, чтобы добавить checked атрибут человека, это могло бы работать, чтобы достичь того, чего вы хотите.

В html.

<ul> 
    <li ng-repeat='person in people'> 
    {{ person.first_name }} 
    <input type="checkbox" ng-model="person.checked" ng-change="filter()" /> 
    </li> 
</ul> 

<ul> 
    <li ng-repeat='event in events'> 
    {{ event.person.first_name }} 
    </li> 
</ul> 

В javascript.

function myctl($scope){ 
    $scope.people = [ 
     { 
      first_name: "Joe", 
      last_name: "Smith", 
      id: 1, 
      checked: true 
     }, 
     { 
      first_name: "Jane", 
      last_name: "Doe", 
      id: 2, 
      checked: true 
     } 
    ]; 

    $scope.allevents = [ 
     { 
      person: { 
       first_name: "Joe", 
       last_name: "Smith", 
       id: 1 
      }, 
      something: "else" 
     }, 
     { 
      person: { 
       first_name: "Jane", 
       last_name: "Doe", 
       id: 2 
      }, 
      something: "else" 
     }, 
     { 
      person: { 
       first_name: "Joe", 
       last_name: "Smith", 
       id: 1 
      }, 
      something: "else" 
     }, 
     { 
      person: { 
       first_name: "Jane", 
       last_name: "Doe", 
       id: 2 
      }, 
      something: "else" 
     }, 
    ]; 

    $scope.filter = function(){ 
     $scope.events = _.filter($scope.allevents, function(event){ 
      var _person = _.find($scope.people, function(item){ 
       return item.id===event.person.id; 
      }); 
      return _person.checked; 
     }); 
    }; 

    $scope.filter(); 

} 

jsfiddle is here.