Angular/Ionic/Javascript: Can't get drop-down filter to work as check-box
Question
Angular and Ionic newbie, making an Angular/Ionic app. Have two filters implemented - straight up Angular filter for open text search, as well as filter to filter by "group" via drop down. 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 .
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
Thanks for any assistance!
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;
}
1 answers
solution1
1 2016-03-14 15:25:00
You have to put ng-change event on checkboxes and apply filters on check/uncheck item. 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Can't get javascript function to work with drop-down list
How to create multiple select drop-down check-box in Google Sheets/Apps Script?
JavaScript drop-down doesn't work after page loads
How to check if drop-down is selected in JavaScript
Can't get a drop-down item's ID
Can a clickable drop-down work with mouseleave?
How to check if the selected value of drop-down is set to No and Text-Box is blank using JavaScript
JavaScript get drop-down values
How to make a “hybrid” HTML drop-down list that can work as a text box as well?
Javascript: First drop-down box working yet other one isn't. Code is the same
Related Tags