Angular / Ionic / Javascript：无法使用下拉过滤器作为复选框

Question

Angular and Ionic newbie, making an Angular/Ionic app. Angular和Ionic新手，制作Angular / Ionic应用程序。 Have two filters implemented - straight up Angular filter for open text search, as well as filter to filter by "group" via drop down. 实现了两个过滤器-向上过滤用于打开文本搜索的Angular过滤器，以及通过下拉菜单按“组”过滤的过滤器。 I would like to change this drop down to a multi-select check box, but cannot seem to get it working. 我想将此下拉菜单更改为多选复选框，但似乎无法正常工作。

I know this has to be simple but can't seem to get it right. 我知道这必须很简单，但似乎无法正确解决。 Similar questions seem to be Angular show checkbox checked filter and Angular filter by text input and checkbox . 类似的问题似乎是Angular show复选框选中的过滤器和Angular过滤器（通过文本输入和复选框）。

Also, I know my directive isn't doing anything here, but can't get the filter to work without it for now. 另外，我知道我的指令在这里什么也没做，但是现在没有它就无法使过滤器工作。 Am trying to address as a separate issue (but suggestions welcome). 我正在尝试作为一个单独的问题解决（但欢迎提出建议）。

Code below, and Plunk here: http://plnkr.co/edit/KMkMHV?p=preview 下面的代码，在此处插入代码： http ://plnkr.co/edit/KMkMHV?p=preview
Thanks for any assistance! 感谢您的协助！

Index.html Index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>

    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" data-require="ionic@*" data-semver="1.2.4" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" />

    <!-- <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> -->
    <script data-require="ionic@*" data-semver="1.2.4" src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="AssetListCtrl">
    <ion-view view-title="Asset list">
      <ion-nav-title>
        <h1 class="title">Asset List2</h1>
        <!--<i class="icon ion-search myAlign_right myGrey"></i>-->
      </ion-nav-title>


      <ion-content class="myNo-padding">
          <ion-list class="myNo-padding">
              <div class="row">
                  <i class="icon ion-search myPadding_right myPadding_left myPadding_top myGrey"></i>
                  <form class="form-inline small">
                      <input ng-model="query" type="text" placeholder="Search for asset">
                  </form>
                  <span class="badge badge-assertive myAlign_right myAlign_centerV">
                      {{filteredAssets.length}}
                  </span>   
              </div>
              <div>
                  this filter doesn't work:
              </div>
              <div ng-repeat = "group in groups">
                  <input type="checkbox" ng-model="groupid" name="groups_group">{{group.name}} 
              </div>

              <form action="" name="testform">
                  This filter works:
                  <select name="groups" id="grp" ng-model="groupid" ng-change="selectGroup()">
                      <option value="0">Show All</option>
                      <option ng-repeat="option in groups" value ="{{option.ID}}">{{option.name}}
                      </option>
                  </select>

                  <!--<select name="assets" id="assets" ng-model="selectedAsset">
                      <option ng-repeat="option in assets | filter: myFilter" value="{{option.ID}}">{{option.driverName}}</option>
                  </select>-->
              </form>

              <div test-directive>
                  <br>Assets
                  <div class="content wrapper" infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
                      <ion-item class="myNo-padding myNote" ng-repeat="asset in filteredAssets = (assets |  filter: query | filter: myFilter)" ui-sref='app.AssetListDetail({index: $index})'>
                          {{asset.vehicleName}}
                      </ion-item>
                  </div>
              </div>
          </ion-list>
      </ion-content>
    </ion-view>
  </body>

</html>

app.js app.js

var app = angular.module('plunker', []);

app.controller("AssetListCtrl",['$scope', 'dataService', function($scope, dataService){

    var assets = [];
    var groups = [];

    dataService.getAssets().then(function(assets){
        $scope.assets = assets;
    });
    dataService.getGroups().then(function(groups){
        $scope.groups = groups;
    }),
    $scope.filterFunction = function(element){
        return element.name.match(/^Ma/) ? true : false;
    };

    $scope.myFilter = function(val, i, a) {
        // if($scope.showAll){return true};
        if($scope.groupid==0){
            return true;
        }
        var m = false;
        var grp = angular.fromJson($scope.selectedGroup);
        angular.forEach(grp.members, function(v, k){
            if(val.ID == v.ID){
                m = true;
            }
        }, m);
        return m;
    };

    // $scope.showAll = true
    $scope.selectedAsset = {};
    $scope.groupid = 0;
    $scope.selectedGroup = {};
    $scope.selectGroup = function(){
        var grp = [];
        angular.forEach($scope.groups, function(v,i){
            if($scope.groupid == v.ID){
                $scope.selectedGroup = v;
                // $scope.showAll = false;
            }
        });
    };
}]);

app.directive('testDirective',function(){
    return{
        controller: 'AssetListCtrl',
        // replace: true,
        // link: function(scope, element, attrs){
        //     scope.selectedGroups = {};
        //     scope.noGroupsSelected = true;
        //     scope.filterByGroup = function(){
        //         angular.forEach(scope.assets, function(asset){
        //             var match = false;
        //             angular.forEach(asset.groups, function(g) {
        //                 if (scope.selectedGroups[g.id]){
        //                     match = true;
        //                 }
        //             });
        //             asset.matchesGroup = match;
        //         });
        //         scope.noGroupsSelected = true
        //         angular.forEach(Object.keys(scope.selectedGroups), function(k) {
        //             if (scope.selectedGroups[k]) {
        //                 scope.noGroupsSelected = false;
        //             }
        //         });
        //     }
        // }
    };
});


app.factory('dataService', function($http){
    var assets = {};
    var groups = {};

    //calling JSON array
    return {
        getAssets: function(){
            return $http.get('sample.json').then(function(response){
                assets = response.data.assets; //populate variable 'assets'
                return response.data.assets;
            });
        },
        getAsset: function(index){
            return assets[index];
        },
        getGroups: function(){
            return $http.get('sample.json').then(function(response){
                groups = response.data.groups; //populate variable 'assets'
                return response.data.groups;
            });
        }
    };
});

sample.json sample.json

{
    "assets": [
        {
            "ID": 1,
            "vehicleName": "vehicle 1"
        },
        {
            "ID": 2,
            "vehicleName": "vehicle 2"
        },
        {
            "ID": 3,
            "vehicleName": "vehicle 3"
        },
        {
            "ID": 4,
            "vehicleName": "vehicle 4"
        },
        {
            "ID": 5,
            "vehicleName": "vehicle 5"
        },
        {
            "ID": 6,
            "vehicleName": "vehicle 6"
        },
        {
            "ID": 7,
            "vehicleName": "vehicle 7"
        },
        {
            "ID": 8,
            "vehicleName": "vehicle 8"
        },
        {
            "ID": 9,
            "vehicleName": "vehicle 9"
        },
        {
            "ID": 10,
            "vehicleName": "vehicle 10"
        },
        {
            "ID": 11,
            "vehicleName": "vehicle 11"
        }
    ],

    "groups":
        [
            {"ID": 1, "name": "nairobi", "members": [{"ID": 1}, {"ID": 2}, {"ID": 3}, {"ID": 4}, {"ID": 5}]},
            {"ID": 2, "name": "karen", "members": [{"ID": 1}, {"ID": 2}, {"ID": 6}]}, 
            {"ID": 3, "name": "langata", "members": [{"ID": 4}, {"ID": 5}, {"ID": 9}]},
            {"ID": 4, "name": "downtown", "members": [{"ID": 2}, {"ID": 3}]}, 
            {"ID": 5, "name": "westlands", "members": [{"ID": 6}, {"ID": 7},{"ID": 9},{"ID": 10}]}
        ]
}

style.css style.css

.item-complex .item-content, .item-radio .item-content {
    padding: .20em 10px .2em 10px;
}
.myNote {
    border-color: #ddd;
    background-color: #fff;
    color: #aaa;
    z-index: 2;
    display: block;
    margin: -1px;
    padding: .20em 10px .2em 10px;
    border-width: 1px;
    border-style: solid;
}
.myGrey {
    color: #aaa;
}
.myNo-padding {
    padding: 0px !important;
}

.myPadding_right {
    padding-right: 10px;
}
.myPadding_left {
    padding-left: .2em;    
}

.myPadding_top {
    padding-top: 2%;    
}

.myPadding_bottom{
    padding-bottom: 0 0 0 0;    
}

.myAlign_bottom {
    vertical-align: bottom;
}

.myAlign_centerV {
    vertical-align: middle;
}
.myAlign_right {
    position: absolute;
    right: 0px;
}
.larger {
   font-size: 3em;;
}

.large {
    font-size: 2em;
}

.small {
    font-size: .75em;
}

.smaller {
    font-size: .5em;
}

.myRight_obj {
    position: absolute;
    right: 16px;
    width: 50%;
    display: inline-block;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.myLeft_obj {
    /*position: absolute;*/
    right: 0;
    display: inline-block;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.myInlineBlock {
    display: inline-block;
}

Answer 1

You have to put ng-change event on checkboxes and apply filters on check/uncheck item. 您必须在复选框上放置ng-change事件，并在选中/取消选中项上应用过滤器。 You also didn't close the input tag. 您也没有关闭输入标签。

<input type="checkbox" ng-model="groupid" name="groups_group" ng-change="checkboxClicked()">{{group.name}}</input>

and in checkboxClicked function you check which groups are selected and re-apply the filters 并在checkboxClicked函数中检查选中的组并重新应用过滤器

Angular / Ionic / Javascript：无法使用下拉过滤器作为复选框

问题描述

1 个解决方案

解决方案1
1 2016-03-14 15:25:00

Angular / Ionic / Javascript：无法使用下拉过滤器作为复选框

问题描述

1 个解决方案

解决方案1 1 2016-03-14 15:25:00

解决方案1
1 2016-03-14 15:25:00