Ive been trying to add some checkboxes to filter out my <md-card>
and <md-table>
that populate data on ng-repeat
.
This is what my checkbox looks like:
<ul>
<li ng-repeat="tech in technologyArray">
<label>
<input type="checkbox" ng-model="tech.on">
</label>
</li>
</ul>
This is what my custom filter looks like:
$scope.technologyArray = [{
containerId: "7519183",
on: false
}, {
containerId: "8031029",
on: false
}];
.filter('customFilter', function() {
return function(input, techs) {
if(!techs || techs.length === 0) return input;
var out = [];
angular.forEach(input, function(item) {
angular.forEach(techs, function(tech) {
if (item[0].containerId === tech.containerId) {
out.push(item);
}
});
});
return out;
}
And this is my JSON:
{
"1": {
"accountId": "17467569***",
"containerId": "7519***3",
"usageContext": ["web"],
"tag": 1,
"trigger": 1,
"variable": 4,
"account_name": "Account2"
},
"2": {
"accountId": "***",
"containerId": "***",
"usageContext": ["web"],
"account_name": "Account2",
"missing_live": true
},
"3": {
"accountId": "***",
"containerId": "***",
"usageContext": ["web"],
"tag": 2,
"trigger": 1,
"variable": 1,
"account_name": "Account 1"
},
"4": {
"accountId": "***",
"containerId": "***",
"usageContext": ["web"],
"tag": 0,
"trigger": 0,
"variable": 1,
"account_name": "GTMdocx"
},
"5": {
"accountId": "***",
"containerId": "***",
"usageContext": ["web"],
"account_name": "GTMdocx",
"missing_live": true
},
"6": {
"accountId": "21281***2",
"containerId": "8038***",
"usageContext": ["web"],
"tag": 0,
"trigger": 0,
"variable": 0,
"account_name": "Account3"
}
}
Also this line in my custom filter is not right, because i have to add item[0]
wich is not right because inside item we have multiple lines of JSON objects:
if (item[0].containerId === tech.containerId) {
out.push(item);
}
Hope someone could help me, thanks!
This is my NG-repeat of <md-card>
and <table>
if needed:
<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" ng-show="(account|filter:searchName).length > 0"
ng-repeat="account in containers | groupBy: 'accountId' | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name| toArray | customFilter:(technologyArray|filter:{on:true}) track by $index">
<md-toolbar>
<div class="md-toolbar-tools" ng-repeat="container in account | limitTo: 1">
<h1 class="md-display-3"> <a href=""></a></h1>
</div>
</md-toolbar>
<md-card-title>
<table class="table">
<thead>
<tr>
<th>Container Name</th>
<th>Account ID</th>
<th>Container ID</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="container in account | filterBy: ['name', 'account_name']: searchName.name| filterBy: ['name', 'account_name']: searchName.account_name | toArray | customFilter:(technologyArray|filter:{on:true}) track by $index">
<td ng-if="!container.missing_live"><a href="/gui/tags/"></a></td>
<td ng-if="container.missing_live">
<md-tooltip md-visible="container.missing_container" md-direction="top">Missing Live Container
</md-tooltip>
<ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>
</td>
<td></td>
<td></td>
<td>
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button"
ng-click="openMenu($mdMenu, $event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
<md-menu-content width="4">
<md-divider>
<md-menu-item>
<md-button ng-init="item.isfavorite = false;"
ng-class="{yellow : item.isfavorite}"
ng-click="item.isfavorite =!item.isfavorite; AddFavorite(item.isfavorite,container.containerId)"
class="md-icon-button md-accent md-warn" aria-label="Favorite">
<ng-md-icon icon="favorite" ng-init="item.isfavorite = false;"></ng-md-icon>
</md-button>
<p ng-if="item.isfavorite">Remove from favorites</p>
<p ng-if="!item.isfavorite">Add to favorite</p>
</md-menu-item>
<md-menu-item>
<md-button ng-init="item.isHidden = false;"
ng-class="{zebbi : item.isHidden}"
ng-click="item.isHidden =!item.isHidden; Hidecontainer(item.isHidden, container.containerId);"
class="md-icon-button md-accent md-warn" aria-label="Hide">
<ng-md-icon ng-if="!item.isHidden" icon="remove_red_eye"></ng-md-icon>
<ng-md-icon ng-if="item.isHidden" icon="panorama_fisheye"></ng-md-icon>
</md-button>
<p ng-if="item.isHidden">Hidden</p>
<p ng-if="!item.isHidden">Hide</p>
</md-menu-item>
<md-menu-item>
<md-button>
<ng-md-icon icon="more_vert"></ng-md-icon>
whaat
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</td>
</tr>
<tr ng-if="!containers" colspan="4">
<td>No Variables found</td>
</tr>
</tbody>
</table>
</md-card-title>
</md-card>
Aucun commentaire:
Enregistrer un commentaire