Angular / Ionic / Javascript：無法使用下拉過濾器作為復選框

Question

Angular和Ionic新手，制作Angular / Ionic應用程序。 實現了兩個過濾器-向上過濾用於打開文本搜索的Angular過濾器，以及通過下拉菜單按“組”過濾的過濾器。 我想將此下拉菜單更改為多選復選框，但似乎無法正常工作。

我知道這必須很簡單，但似乎無法正確解決。 類似的問題似乎是Angular show復選框選中的過濾器和Angular過濾器（通過文本輸入和復選框）。

另外，我知道我的指令在這里什么也沒做，但是現在沒有它就無法使過濾器工作。 我正在嘗試作為一個單獨的問題解決（但歡迎提出建議）。

下面的代碼，在此處插入代碼： http ://plnkr.co/edit/KMkMHV?p=preview
感謝您的協助！

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

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

{
    "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

.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

您必須在復選框上放置ng-change事件，並在選中/取消選中項上應用過濾器。 您也沒有關閉輸入標簽。

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

並在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