Question

我正在尝试根据类别和代码过滤产品结果。

产品可以有多个类别，一个类别可以有很多产品，因此它是多对多的关系。

标签也是如此。

我希望默认情况下检查过滤器选项（最终当您选择菜单项例如Cat 1时，过滤器侧菜单中将取消选择其他类别）。

我现在遇到的问题是，当我取消选中输入时，它会从列表中消失。我使用指令将列表链接到一组复选框。菜单列表与复选框组的模型不同。

我从这里获得了指令https://github.com/vitalets/checklist-model

以下是演示http://plnkr.co/edit/NjAH4HrTX3qHWw4WmCvb?p=preview

编辑：

您的回答有效，但我最初无法检查复选框。在我的真实代码中，我从服务器获取类别列表。我认为新添加的angular.copy正在复制空列表版本。

$scope.categories = [];
  $scope.currentCategory = {};
  $http.get('/api/v1.0/categories/all').
    success(function(data, status, headers, config) {
      angular.copy(orderCategoriesForUser(data.categories), $scope.categories);
      if($scope.categories){
        $scope.currentProduct = $scope.categories[0];
      }
    }
  );

编辑2：

我必须为每个$ http呼叫设置一个承诺，然后执行

categoryPromise = $http.get('/api/v1.0/categories/all').

$q.all([categoryPromise, tagsPromise])
    .then(function(results){
      $scope.sideFilter = {
          'categories': angular.copy($scope.categories),
          'tags': angular.copy($scope.tags),
      };
    });

Answer 1

您的违规行是：

$scope.sideFilter = {categories: $scope.categories, 'tags': $scope.tags}

问题在于您将categories和tags属性设置为引用类型（对象），因此对这些属性的更改将直接更改它们引用的对象。

快速解决方法是使用angular.copy将属性设置为对象的深层副本：

$scope.sideFilter = {categories: angular.copy($scope.categories), 'tags': angular.copy($scope.tags)};

Fork of your Plunker

未选中时，链接模型复选框列表中的项目会消失

编辑：

编辑2：

1 个答案: