0
드롭 다운에서 선택한 값을 기반으로 테이블의 결과를 필터링하는 필터를 만들려고합니다. 현재 'type'을 제외한 모든 드롭 다운에서 작동합니다.angularJS에서 object 속성을 통해 select created를 사용하여 테이블의 결과 필터링
'유형'드롭 다운은 객체 배열의 고유 속성을 사용하여 만들어졌습니다. 이제는 '내부'와 '외부'라는 두 개의 값이 포함되어 있습니다.
내가 선택한 값에 따라 필터링 된 결과 만 표에 표시됩니다. 그러나 지금은 그냥 공백으로 표시됩니다.
어떻게 수정합니까?
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.loc = {
Sydney: 4,
Toronto: 7,
London: 3,
Berlin: 7
};
$scope.country = ['Australia', 'India', 'Germany', 'China', 'Canada', 'United Kingdom'];
$scope.items = [{
name: 'ABC',
type: 'INTERNAL',
countryName: 'Germany',
city: 'Berlin'
}, {
name: 'BCD',
type: 'EXTERNAL',
countryName: 'India',
city: 'Bangalore'
}, {
name: 'CDE',
type: 'INTERNAL',
countryName: 'Germany',
city: 'Berlin'
}, {
name: 'ABC',
type: 'EXTERNAL',
countryName: 'Australia',
city: 'Sydney'
}, {
name: 'DEF',
type: 'INTERNAL',
countryName: 'China',
city: 'Shanghai'
}, {
name: 'CDE',
type: 'EXTERNAL',
countryName: 'Germany',
city: 'Berlin'
}, {
name: 'BCD',
type: 'INTERNAL',
countryName: 'Australia',
city: 'Sydney'
}, {
name: 'ABC',
type: 'EXTERNAL',
countryName: 'United Kingdom',
city: 'London'
}, {
name: 'ABC',
type: 'INTERNAL',
countryName: 'China',
city: 'Shanghai'
}, {
name: 'DEF',
type: 'EXTERNAL',
countryName: 'Canada',
city: 'Toronto'
}, {
name: 'DEF',
type: 'INTERNAL',
countryName: 'India',
city: 'Bangalore'
}, {
name: 'BCD',
type: 'EXTERNAL',
countryName: 'Germany',
city: 'Berlin'
}, {
name: 'ABC',
type: 'INTERNAL',
countryName: 'Canada',
city: 'Toronto'
}];
$scope.changeFilter = function() {
\t $scope.my.countryName = $scope.my.countryName || undefined;
\t $scope.my.city = $scope.my.city || undefined;
\t $scope.my.type = $scope.my.type || undefined;
};
}]);
app.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container">
<div ng-app="myApp" ng-controller="myCtrl">
\t <div class="row">
\t <div class="col-md-3">
\t \t <label>Search Keyword:</label>
\t \t <input type="text" class="form-control" ng-model="my.$"/>
\t </div>
\t <div class="col-md-3">
\t \t <label>Country:</label>
\t \t <select class="form-control" ng-model="my.countryName" ng-options="ctry for ctry in country" ng-change="changeFilter()">
\t \t <option value="">Select a country</option>
\t \t </select>
\t </div>
\t <div class="col-md-3">
\t \t <label>City</label>
\t \t <select class="form-control" ng-model="my.city" ng-options="key as key for (key, value) in loc" ng-change="changeFilter()">
\t \t <option value="">Select a city</option>
\t \t </select>
\t </div> \t \t
\t <div class="col-md-3">
\t \t <label>Type:</label>
\t \t <select class="form-control" ng-model="my.type" ng-options="item.type for item in items | unique:'type'" ng-change="changeFilter()">
\t \t <option value="">Select a type</option>
\t \t </select>
\t </div>
\t </div>
\t <hr />
\t <div class="row">
\t <table class="table table-bordered">
\t \t <tr>
\t \t <th>Name</th>
\t \t <th>Country</th>
\t \t <th>City</th>
\t \t </tr>
\t \t <tr ng-repeat="item in items | filter: my">
\t \t <td>{{item.name}}</td>
\t \t <td>{{item.countryName}}</td>
\t \t <td>{{item.city}}</td>
\t \t </tr>
\t </table>
\t </div>
</div>
</div>
예! 감사! – Sunny