javascript - 使用下拉选项过滤器不适用于 ng-repeat

Question

我正在尝试使用下拉列表(系统和设备)中的值过滤出表格。每当我尝试将过滤器应用于 ng-repeat 时，表中的所有数据都会消失。我已将 ng-model 值应用于设备和系统下拉列表，如下所示。我现在想做的就是使用过滤器来缩小表中的信息范围。我已经提供了必要的代码以及数据的屏幕截图。

HTML

 <div class="row">
      <div class="form-group col-xs-6" id="sysList">
         <label for="selectsys">Select system list:</label>
         <select class="form-control" id="selectsys" data-ng-model="system">
            <option value="" disabled="" selected="" style="display: none">List of systems</option>
            <option ng-repeat="d in data">{{d.$id}}</option>
         </select>
      </div>
      <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6" id="equipList">
         <label for="date">Select date</label>
         <input type="text" class="form-control" id="date" placeholder="Day, Month, Year" onfocus="(this.type='date')" data-ng-model="date"/>
      </div>
   </div>
   <div class="row">
      <div class="form-group col-xs-6" id="equipList">
         <label for="selectequ">Select equipment list:</label>
         <select class="form-control" id="selectequ" data-ng-model="equipment">
            <option value="" disabled="" selected="" style="display: none">List of Equipments</option>
            <option data-ng-repeat="eq in allEquipments track by $index">{{eq}}</option>
         </select>
      </div>
      <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6" id="Type">
         <label for="searchType">Search by Type:</label>
         <select class="form-control" id="searchType" data-ng-model="type">
            <option value="" disabled="" selected="" style="display: none">Select type of maintenance</option>
            <option>Corrective Maintenance</option>
            <option>Preventive Maintenance</option>
            <option>Standby</option>
         </select>
      </div>
   </div>

   <hr/>
   <div class="table-responsive">
      <table class="table table-striped table-hover">
         <tr>
            <th id="system">System</th>
            <th id="equipment">Equipment</th>
            <th id="date">Date</th>
            <th id="type">Type</th>
         </tr>
         <tr data-ng-repeat="d in allEquipments | filter: equipment | filter: system">
            <td headers = "system">{{allSystems[$index]}}</td>
            <td headers = "equipment">{{d}}</td>
            <td headers = "date">date</td>
            <td headers = "type">Standby</td>
         </tr>
      </table>
   </div>
</div>

JS

    /*global angular*/
var app = angular.module('sdt', ['ngRoute', 'firebase']);

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';
    $routeProvider.when('/sdt', {
        templateUrl: 'searchdowntime/sdt.html',
        controller: 'sdtCtrl'
    });
}]);

app.controller('sdtCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
    'use strict';

    $scope.allSystems = [];
    $scope.allEquipments = [];
    var ref = firebase.database().ref();
        var data = ref.child("data");
        var list = $firebaseArray(data);

        list.$loaded().then(function(data) {
            $scope.data = data;
            angular.forEach ($scope.data , function (d) {
                angular.forEach (d.equipments, function (e) {
                    $scope.allSystems.push(d.$id);
                    $scope.allEquipments.push(e.equipment);
                    console.log($scope.allEquipments);
                    console.log($scope.allSystems);
                })
            });
            console.log($scope.data);
        }).catch(function(error) {
            $scope.error = error;
        });

    $scope.onSystemChange = function(item){

  }
}]);

Answer 1

我建议调用下拉菜单的 onChange 函数，在该函数中过滤列表 allEquipments(所有设备的副本)并在 ng-repeat 中使用复制的列表。