您的代码问题

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.

使用复选框筛选对象列表

1 个答案:

您的代码问题

我的建议