Question

我正试图让这三个复选框部分用Angular进行过滤，此时我有点迷失了。以下是我的代码，任何帮助都会非常感激，因为我一直在弄乱这一天。

var filterMod = angular.module('angularNav', [])
.controller('angularController', function($scope) {
  //sample data
  var tags = [];
  var program1 = {
    name:'By Program',
    properties: [
      {name:'By Program',value:'Financial Inclusion'}, {name:'By Program',value:'Education and Learning'},
      {name:'By Program',value:'Youth Livelihoods'}, {name:'By Program',value:'Scholars Program'}, 
    ]
  };
  var program2 = {
    name:'By Region',
    properties:[
      {name:'By Region',value:'Sub-Saharan Africa'}, {name:'By Region',value:'Benin'}, {name:'By Region',value:'Burkina Faso'}, {name:'By Region',value:'Burundi'},
      {name:'By Region',value:'Cameroon'}, {name:'By Region',value:'Cote dIvoir'}, {name:'By Region',value:'Democratic Republic of the Congo'},
      {name:'By Region',value:'Djibouti'}, {name:'By Region',value:'Ethiopia'}, {name:'By Region',value:'Ghana'}, {name:'By Region',value:'Kenya'},
      {name:'By Region',value:'Madagascar'}, {name:'By Region',value:'Malawi'}, {name:'By Region',value:'Mauritius'}, {name:'By Region',value:'Mozambique'},
      {name:'By Region',value:'Liberia'}, {name:'By Region',value:'Rwanda'}, {name:'By Region',value:'Uganda'}, {name:'By Region',value:'Senegal'},
      {name:'By Region',value:'South Africa'}, {name:'By Region',value:'Tanzania'}, {name:'By Region',value:'Togo'}, {name:'By Region',value:'Zambia'},
      {name:'By Region',value:'Zimbabwe'}, {name:'By Region',value:'Northern Africa'}, {name:'By Region',value:'Egypt'}, {name:'By Region',value:'Morocco'},
      {name:'By Region',value:'Northern America'}, {name:'By Region',value:'Canada'}, {name:'By Region',value:'United States of America'},
      {name:'By Region',value:'Latin America and the Caribbean'}, {name:'By Region',value:'Columbia'}, {name:'By Region',value:'Costa Rica'},
      {name:'By Region',value:'Dominican Republic'}, {name:'By Region',value:'Guatemala'}, {name:'By Region',value:'Honduras'}, {name:'By Region',value:'Haiti'},
      {name:'By Region',value:'Paraguay'}, {name:'By Region',value:'Peru'}, {name:'By Region',value:'Asia'}, {name:'By Region',value:'Lebanon'},
      {name:'By Region',value:'Nepal'}

    ]
  };
  var program3 = {
    name:'By Theme',
    properties: [
      {name:'By Theme',value:'Agriculture'}, {name:'By Theme',value:'Women'},
      {name:'By Theme',value:'Young People'}, {name:'By Theme',value:'Leadership'},
      {name:'By Theme',value:'Research and Learning'}, {name:'By Theme',value:'Technology'}
    ]
  };
  
  tags.push(program1);
  tags.push(program2);
  tags.push(program3);    
    
  $scope.Program = tags;
  
  //create checkbox filters on the fly
  var filters = [];
  _.each(tags, function(program){
    _.each(program.properties,function(property){      
      var existingfilter = _.findWhere(filters, { name: property.name });
        if(!existingfilter){
        var filter = {};
        filter.name = property.name;
        filter.values = [];
        filter.values.push({value: property.value});
        filters.push(filter);   
      }else{
        var existingoption = _.findWhere(existingfilter.values, { value: property.value });
        if(!existingoption){
           existingfilter.values.push({value: property.value}); 
        }
      }   
    });
  });
  $scope.Filters = filters;
  
});
  
filterMod.filter('dynamicFilter', function () {
  return function (tags, filterCategories, scope) {
    var filtered = [];
    
    var programFilters = _.filter(filterCategories, function(fc) {
      return  _.any(fc.values, { 'IsIncluded': true });
    });
    
    _.each(tags, function(prog) {
      var includeProgram = true;
      _.each(programFilters, function(filter) {
        var props = _.filter(prog.properties, { 'name': filter.name });
        if (!_.any(props, function(prog) { return _.any(filter.values, { 'value': prog.value, 'IsIncluded': true }); })){
          includeProgram = false;
        }
      });
      if (includeProgram) {
        filtered.push(prog);
      }
    });
    return filtered;
  };
});

.ng-cloak{
  display:none;
}
.topnav{
    float:left;
    width:400px;
}

.program{
  float:left;
  width:100px;
  height:100px;
  margin:20px;
  padding:20px;
  text-align:center;
  background-color:#eee;
}
.sortoptions{
  list-style:none;
  padding-left:0px;
}
h3{
  margin-bottom:0px;
}
ul{
  margin-top:2px;
}

<html>

<head>

  <meta charset="UTF-8">

  <title>MCF Nav Filter</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div ng-app='angularNav' class="ng-cloak" ng-cloak="">
  <div ng-controller="angularController">
    <h2>Tag Filters</h2>
    <div class="topnav">
      <div ng-repeat="filter in Filters">
          <h3 class="sort">{{filter.name}}</h3>
          <ul class="sortoptions">
            <li ng-repeat="option in filter.values">
              <input type="checkbox" ng-model="option.IsIncluded"  ng-checked="option.IsIncluded"> {{option.value}}
            </li>

          </ul>
      </div>
    </div>

    <div class="programlist">
      <div ng-repeat="program in Programs | dynamicFilter:Filters:this" class="program">
        {{program.name}}
      </div>

    </div>
  </div>
</div>

  <script src='http://codepen.io/assets/libs/fullpage/angular.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js'></script>

  <script src="js/test.js"></script>

</body>

</html>

Answer 1

老实说，你做整件事的方式有点不稳定。但要使用它而不是在程序

中使用ng-repeat程序来使用它

    <div ng-repeat="filterItem in Filters" class="program">
      <div ng-repeat="item in filterItem.values | filter:{IsIncluded:true}">
        {{item.value}}
      </div>
    </div>

如何使用AngularJS过滤复选框

1 个答案: