2017-09-12 7 views
1

ドロップダウンリスト(システム&の機器)の値を使用してテーブルをフィルタリングしようとしています。 ng-repeatにフィルタを適用しようとするたびに、テーブルのすべてのデータが消えます。以下に示すように、ng-modelの値を機器とシステムのドロップダウンに適用しました。私が今やりたいのは、テーブル内の情報を絞り込むフィルタを使用することだけです。私はデータのスクリーンショットと共に必要なコードを提供しました。ドロップダウンオプションを使用してng-repeatでフィルタが機能しない

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

    } 
}]); 

enter image description here

+0

「いつでもフィルタを適用しようとします」あなたはどこで試していますか? –

+0

フィルタを削除して、テーブルからデータを削除しました。私は文書を編集して、それらを再び挿入するでしょう! –

+0

'equipment'と' system'値を '{{equipment}} 'を使ってあなたのビューに表示しようとします。可能なデフォルト値は、リスト内のどの値にも適合しません。 –

答えて

0

私は(リストallEquipmentsその機能フィルタでは、ドロップダウンの機能のonChangeを呼び出すためにallequipmentsのコピーを示唆)、ng-repeatでコピーしたリストを使用します。

関連する問題