Javascript AngularJS过滤器：复选框根据属性值默认处于活动状态

我正在开发一个原型，它使用AngularJS过滤JSON数据。这里有一个工作沙箱：

我需要你的帮助来解决两个问题：

如何使用“全部选中”和“全部取消选中”按钮来激活/停用所有复选框过滤器

默认过滤：如何使网页初始化时只显示灰鸟

多谢各位

HTML:

CSS

---

我实现了您的要求，添加了以下两个$scope函数

$scope.checkAll

迭代所有

pets

FilteredAttributes

及其值，并将它们设置为true，以

$scopeFilter

的形式

$scope.uncheckAll只需重置

$scopeFilter

对象

对于默认筛选器，我删除了.js文件中的

ng init=“filter[prop]={}”

以初始化

$scopeFilter

，如下所示：

$scope.filter = {species : {bird : true} , color : {gray: true}};

$scope.checkAll=function（）{
const result={}；
$scope.pets.map（pet=>pet.FilterAttributes）
.forEach（属性=>Object.keys（属性）
.forEach（prop=>{
如果（结果[prop]）{
结果[prop][attribute[prop]]=true
}
其他的
{
结果[prop]={}；
结果[prop][attribute[prop]]=true
}
})
);
$scope.filter=结果；
};
$scope.uncheckAll=函数（）{
$scope.filter={}
};

---

您可以在此处找到解决方案

我看不到您版本的checkAll、uncheckAll方法？您能帮我看看这个挑战吗：

var petSelector = angular.module("petSelector", []);

petSelector.controller("PetCtrl", [
 "$scope",
  function($scope) {
$scope.pets = [
  {
    name: "Finch",
    FilterAttributes: { species: "bird", size: "x-small", color: "red" },
    img:
      "http://upload.wikimedia.org/wikipedia/commons/7/7c/Fringilla_coelebs_chaffinch_male_edit2.jpg"
  },
  {
    name: "Cockatiel",
    FilterAttributes: { species: "bird", size: "small", color: "yellow" },
    img: "http://upload.wikimedia.org/wikipedia/commons/0/07/Captive.jpg"
  },
  {
    name: "African Gray Parrot",
    FilterAttributes: { species: "bird", size: "large", color: "gray" },
    img:
      "http://upload.wikimedia.org/wikipedia/commons/2/28/Psittacus_erithacus_-perching_on_tray-8d.jpg"
  },
  {
    name: "Macaw",
    FilterAttributes: { species: "bird", size: "x-large", color: "blue" },
    img:
      "http://upload.wikimedia.org/wikipedia/commons/0/00/Macaw.blueyellow.arp.750pix.jpg"
  },
  {
    name: "Shih Tzu",
    FilterAttributes: { species: "dog", size: "x-small", color: "multi" },
    img: "http://upload.wikimedia.org/wikipedia/commons/3/30/Shih-Tzu.JPG"
  },
  {
    name: "Border Collie",
    FilterAttributes: { species: "dog", size: "small", color: "multi" },
    img:
      "http://upload.wikimedia.org/wikipedia/commons/b/b1/Border_Collie_liver_portrait.jpg"
  },
  {
    name: "American Staffordshire Terrier",
    FilterAttributes: { species: "dog", size: "large", color: "gray" },
    img: "http://upload.wikimedia.org/wikipedia/commons/d/de/AmStaff2.jpg"
  },
  {
    name: "Bullmastiff",
    FilterAttributes: { species: "dog", size: "x-large", color: "brown" },
    img:
      "http://upload.wikimedia.org/wikipedia/commons/9/9e/Bullmastiff_Junghund_1_Jahr.jpg"
  }
];

$scope.filter = {};

$scope.getOptionsFor = function(propName) {
  return ($scope.pets || [])
    .map(function(p) {
      return p.FilterAttributes[propName];
    })
    .filter(function(p, idx, arr) {
      return arr.indexOf(p) === idx;
    });
};

$scope.filterByProp = function(pets) {
  var matchesAND = true;
  for (var prop in $scope.filter) {
    if (noSubFilter($scope.filter[prop])) continue;
    if (!$scope.filter[prop][pets.FilterAttributes[prop]]) {
      matchesAND = false;
      break;
    }
  }
  return matchesAND;
};

function noSubFilter(subFilterObj) {
  for (var key in subFilterObj) {
    if (subFilterObj[key]) return false;
  }
  return true;
}

}
]);

    * {
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica', arial, sans-sarif;
  color: #fff;
}

h1 {
  color: #fff;
  margin: 0;
}

p {
  margin-top: 0;
}

b {
  color: #fff;
  text-transform: uppercase;
}

.wrapper {
  width: 800px;
  margin: 20px auto;
  padding: 40px;
  background: #00a5bb;
  border-radius: 8px;
}

.attr {
  width: 32%;
  margin: 0 .5%;
  padding: 20px;
  display: inline-block;
  vertical-align: top;
}

.checkbox {
  width: 49%;
  display: inline-block;
  margin: 10px 0 0;
}

.results {
  font-size: 12px;
  margin: 10px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid white;
}

.pet {
  margin-bottom: 10px;
  display: inline-block;
  width: 33%;
  text-align: center;
}
.pet img {
  max-width: 85%;
  max-height: 200px;
}
.pet.ng-enter, .pet.ng-leave {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}
.pet .ng-enter {
  opacity: 0;
}
.pet.ng-enter-active {
  opacity: 1;
  height: auto;
}
.pet.ng-leave-active {
  opacity: 0;
  height: 0;
}

$scope.filter = {species : {bird : true} , color : {gray: true}};