AngularJS不能与'multiple'标志一起使用 [英] AngularJS doesn't work with 'multiple' flag

问题描述

我正在尝试从选择框中过滤一些数据.当我不使用"multiple"标志时，它可以正常工作.但是，这里的想法是能够选择多个环境和多个应用程序，并根据我选择的选项来显示它，但它不起作用.我以多种不同的方式尝试过，但没有找到我所缺少的东西.有人可以帮我吗?

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

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

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

更新的代码

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

角度控制器辅助代码

    (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"
      ];
...

在此处插入

谢谢

这篇关于AngularJS不能与'multiple'标志一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！