Tukukkk

I'm trying to filter some data from the select box. It works fine when I don't use the "multiple" flag. However, the idea here is to be able to select multiple environments and multiple applications and show it based the options I selected, but it is not working. I tried in many different ways, but I didn't find what I'm missing. Can someone help me here?

Here are the files which I'm using.

monitoring.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>

monitoring.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);

You can create custom function for filter

Updated code

<tbody align="left">

        <tr ng-repeat="todo in todos | **filter: filterByGenres** | orderBy: 'application' ">

          <td>{{todo.application}}</td>

          <td>{{todo.environment}}</td>

          <td>{{todo.statusUp}}</td>

          <td>{{todo.statusDown}}

            <td>

        </tr>

angular controller side code

    (function(angular) {

  angular

    .module('plunker', ['ngMaterial'])

    .controller('monitoring', function($scope, $http) {



      **$scope.filterByGenres = function(ele) {

        var res = true

        if ($scope.selectedEnvironments !== null && $scope.selectedEnvironments.length > 0) {

          if ($scope.selectedEnvironments.indexOf(ele.environment) == -1) {

            res = false;

          }

        }

        if ($scope.selectedApplications !== null && $scope.selectedApplications.length > 0) {

          if ($scope.selectedApplications.indexOf(ele.application) == -1) {

            res = false;

          }

        }

        return res;

      }**



      $scope.segments = [

        "SegmentA",

        "SegmentB",

        "SegmentC"

      ];

...

Plunker here

Thanks

I just run your source on codepen.io and nothing output, try included md then everything ok. So, please try use .module('monitor', ['ngMaterial']) and test again.