2
我在JSON中有一個複雜的數據集，其中包含本質層級的位置數據，其中包含區域的父級，州/國家/省的子對象以及子對象的子對象城市。我試圖過濾每個這些數據部分。AngularJS - 使用多級JSON進行篩選
其他值（階段和數字）上的過濾器正常工作，但位置數據不正確。我假設這是因爲該數據的分層性質，但是我無法在Angular中找到任何過濾數據的例子來找出我做錯了什麼。
Plunkr：http://plnkr.co/edit/vaKU7l?p=preview
var app = angular.module('plunker', ['angular.filter']);
app.controller('MainCtrl', function($scope, $anchorScroll, $location, $http) {
\t $scope.cart = [];
\t $scope.addToCart = function(index) {
\t \t $scope.cart.push(index);
\t \t $scope.cartCount = $scope.cart.length;
\t }
\t $scope.activeRow = function(index) {
\t \t $scope.selectedRow = index;
\t \t $location.hash();
\t \t $anchorScroll('anchor-' + index);
\t }
\t $scope.gotoAnchor = function(x) {
\t \t var newHash = 'anchor' + x;
\t }
// GET data
$scope.dataObject = data.List;
$scope.locationObject = data.Locations;
});body{background:#eee;}
div.cart{display:block;height:70px;background:silver;margin-left:20px;width:200px;padding:5px 10px;margin-bottom:20px;margin-top:20px;}
.cart h1{color:#fff;line-height:20px;}
.item-list-wrapper{height:400px;width:90%;border:1px solid #ddd;overflow-y:scroll;margin-left:20px;}
.item-list-wrapper table td{padding:10px;vertical-align:middle;margin-bottom:10px;font-size:12px;}
.item-list{height:auto;width:100%;margin-bottom:10px;box-shadow:0 2px 2px rgba(0,0,0,0.2);border:1px solid #fff;background:#efefe4;}
.col-num{width:100px;}
.col-compound{width:80px;}
.filters{width:100%;clear:both;margin-left:20px;}
.filters select{width:200px;}
.filters column{height:100px;width:200px;display:inline-block;margin:0;padding:0;}
.filters select{display:inline-block;}
.region{font-weight:bolder;}
.state{font-weight:normal;}<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="[email protected]*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="angular-ui.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script data-require="[email protected]*" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.min.js"></script>
<script src="angular-ui.min.js"></script>
<script src="app.js"></script>
<script src="http://zbl.me/test/103015.js"></script>
<body ng-controller="MainCtrl">
<div ng-view=""></div>
<!--item-list-wrapper -->
<div class="filters">
<h2>Filter results</h2>
<column>
\t \t \t \t <select name="selectRegion" class="form-control" ng-model="selectRegion" ng-change="europeSelected()" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse">
\t \t \t \t \t <option value="">Select Region</option>
\t \t \t \t </select>
\t \t \t \t
\t \t \t \t <select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-options="state as state.StateName for state in selectRegion.States">
\t \t \t \t \t <option value="">Select State/Province/Country</option>
\t \t \t \t </select>
\t \t \t \t
\t \t \t \t <select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-options="city as city.CityName for city in selectState.Cities">
\t \t \t \t \t <option value="">Select City</option>
\t \t \t \t </select>
</column>
\t \t \t <column>
\t \t \t \t <select name="selectPhase" class="form-control" ng-model="selectPhase" ng-options="data.Phase as data.Phase for data in dataObject | unique: 'Phase' | orderBy: 'Phase' ">
\t \t \t \t \t <option value="">Select Phase</option>
\t \t \t \t </select>
\t \t \t \t <select name="selectNumber" class="form-control" ng-model="selectNumber" ng-options="data.Number as data.Number for data in dataObject | unique: 'Compound' | orderBy: 'Compound' ">
\t \t \t \t \t <option value="">Select Number</option>
\t \t \t \t </select>
\t \t \t </column>
</div>
<div class="cart">
<h1>Cart: {{cartCount}}</h1></div>
<div class="item-list-wrapper">
\t <table class="table table-condensed table-hover">
\t \t <tr ng-repeat="data in dataObject | filterBy: ['location.Region']: selectRegion | filterBy: ['state.StateName']: selectState | filterBy: ['city.CityName']: selectCity | filterBy:['Phase']: selectPhase | filterBy:['Number']: selectNumber" ng-click="activeRow($index)">
\t \t \t <td class="column">{{data.Phase}}</td>
\t \t \t <td class="column col-num">{{data.Number}}</td>
\t \t \t <td class="column col-compound">{{data.Compound}}</td>
\t \t \t <td>
<span ng-repeat="location in data.Locations track by $index" class="region">{{ location.Region}}:
\t \t \t \t <span ng-repeat="site in location.Sites | unique: 'State'" class="state">{{site.State}}
\t \t \t \t \t </span>
\t \t \t \t </span>
\t \t \t </td>
\t \t \t <td><a href="" ng-click="addToCart()">Add</a></td>
\t \t </tr>
\t </table>
</div>
</body>
</html>