Я пытаюсь отфильтровать некоторые данные из поля выбора.Это прекрасно работает, когда я не использую флаг «несколько».Однако идея заключается в том, чтобы иметь возможность выбирать несколько сред и несколько приложений и показывать их на основе выбранных параметров, но это не работает.Я пытался разными способами, но я не нашел то, что мне не хватает.Может ли кто-нибудь помочь мне здесь?
Вот файлы, которые я использую.
мониторинг.html
<div ng-controller="monitoring" class="md-padding selectdemoOptionGroups" ng-cloak="" ng-app="monitor">
<div>
<h1 class="md-title">Monitoring</h1>
<div layout="row">
<md-input-container style="margin-right: 10px;">
<label>Segments</label>
<md-select ng-model="segment" >
<md-option ng-repeat="segment in segments" value="{{segment}}">{{segment}}</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label>Environments</label>
<md-select ng-model="selectedEnvironments" multiple>
<md-optgroup label="environments">
<md-option ng-value="environment.name" ng-repeat="environment in environments | filter: {category: 'env' }">{{environment.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<md-input-container>
<label>Applications</label>
<md-select ng-model="selectedApplications" multiple="">
<md-optgroup label="application">
<md-option ng-value="application.name" ng-repeat="application in applications | filter: {category: 'app' } ">{{application.name}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="clear()" style="width: 55px; height: 50px;" id="iconTextButton">Clear</button>
<button style="width: 55px; height: 50px;" id="iconTextButton">Run</button>
</div>
<div class="md-card container-shadow" style="margin:15px">
<div class="card-header4">
Monitoring page1 for {{segment}}
</div>
<table id="grid422">
<colgroup>
<col style="width:830px" />
<col style="width:130px" />
<col style="width:130px" />
<col style="width:130px" />
</colgroup>
<thead align="left">
<tr>
<th >Application</th>
<th>Environment</th>
<th >StatusUP</th>
<th>StatusDown</th>
</tr>
</thead>
<tbody align="left" >
<tr ng-repeat="todo in todos | filter:segment | filter:selectedEnvironments | orderBy: 'application' ">
<td>{{todo.application}}</td>
<td>{{todo.environment}}</td>
<td>{{todo.statusUp}}</td>
<td>{{todo.statusDown}}<td>
</tr>
</tbody>
</table>
</div></div>
мониторинг.js
(function (angular) {
angular
.module('monitor')
.controller('monitoring', function ($scope, $http) {
$scope.segments = [
"SegmentA",
"SegmentB",
"SegmentC"
];
$scope.selectedSegments = [];
$scope.printSelectedSegments = function printSelectedSegments() {
return this.selectedSegments.join('');
};
$scope.environments = [
{ category: 'env', name: 'ENV1' },
{ category: 'env', name: 'ENV2' },
{ category: 'env', name: 'ENV3' },
{ category: 'env', name: 'ENV4' }
];
$scope.selectedEnvironments = [];
$scope.printSelectedEnvironments = function printSelectedEnvironments() {
var numberOfEnvironments = this.selectedEnvironments.length;
if (numberOfEnvironments > 1) {
var needsOxfordComma = numberOfEnvironments > 2;
var lastEnvironmentConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastEnvironment = lastEnvironmentConjunction +
this.selectedEnvironments[this.selectedEnvironments.length - 1];
return this.selectedEnvironments.slice(0, -1).join(', ') + lastEnvironment;
}
return this.selectedEnvironments.join('');
};
$scope.applications = [
{ category: 'app', name: 'App1' },
{ category: 'app', name: 'App2' },
{ category: 'app', name: 'App3' },
{ category: 'app', name: 'App4' }
];
$scope.selectedApplications = [];
$scope.printSelectedApplications = function printSelectedApplications() {
var numberOfApplications = this.selectedApplications.length;
if (numberOfApplications > 1) {
var needsOxfordComma = numberOfApplications > 2;
var lastApplicationConjunction = (needsOxfordComma ? ',' : '') + ' and ';
var lastApplication = lastApplicationConjunction +
this.selectedApplications[this.selectedApplications.length - 1];
return this.selectedApplications.slice(0, -1).join(', ') + lastApplication;
}
return this.selectedApplications.join('');
};
$scope.todos = [
{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV2","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentA","application":"App1","environment":"ENV1","statusUp":57,"statusDown":"13"},{"segment":"SegmentB","application":"App2","environment":"ENV1","statusUp":12,"statusDown":"33"},{"segment":"SegmentC","application":"App3","environment":"ENV3","statusUp":333,"statusDown":"213"},{"segment":"SegmentB","application":"App1","environment":"ENV4","statusUp":357,"statusDown":"133"},{"segment":"SegmentC","application":"App2","environment":"ENV2","statusUp":57,"statusDown":"13"}
];
});
})(angular);