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){
}
}]);
「いつでもフィルタを適用しようとします」あなたはどこで試していますか? –
フィルタを削除して、テーブルからデータを削除しました。私は文書を編集して、それらを再び挿入するでしょう! –
'equipment'と' system'値を '{{equipment}} 'を使ってあなたのビューに表示しようとします。可能なデフォルト値は、リスト内のどの値にも適合しません。 –