0
Angular和Ionic新手，製作Angular/Ionic應用程序。實現兩個過濾器 - 直接使用Angular過濾器進行開放式文本搜索，以及過濾器通過「下拉式」組進行過濾。我想將此下拉菜單更改爲多選複選框，但似乎無法使其正常工作。Angular/Ionic/Javascript：無法使用下拉式過濾器作爲複選框工作
我知道這一定很簡單，但似乎無法做到。類似的問題似乎是Angular show checkbox checked filter和Angular filter by text input and checkbox。
另外，我知道我的指令在這裏沒有做任何事情，但是現在沒有它，無法讓過濾器工作。我試圖解決作爲一個單獨的問題（但建議歡迎）。
下面的代碼和plunk在這裏：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="[email protected]*" data-semver="1.2.4" href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" />
<!-- <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> -->
<script data-require="[email protected]*" 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;
}