个人中心
gpt4 book ai didi

javascript - AngularJS:使用多级 JSON 进行过滤和唯一性

转载 作者：行者123 更新时间：2023-12-03 08:28:24 26 4
gpt4 key购买 nike

我有一个显示在表格中的数据集。每个对象都有一个 Locations 子对象，Locations 也有一个 Region 和 Sites 子对象，它是一个数组。

我遇到了两个问题:

首先，在我看来，要显示站点数据(即“状态”值)，我得到了重复项。我尝试使用“唯一”过滤器仅显示唯一的状态值，但它不起作用。

其次，我想使用带有区域、州/国家/省和城市这些数据元素的选择列表作为过滤机制。这也行不通。

请参阅 Plunkr 了解工作示例:http://plnkr.co/edit/p0ImqB?p=preview 

var app = angular.module('plunker', ['angular.filter']);

app.controller('MainCtrl', function($scope, $anchorScroll, $location, $http) {

	$scope.cart = [];

	$scope.addToCart = function(index) {
		$scope.cart.push(index);

		$scope.cartCount = $scope.cart.length;
	}



	$scope.activeRow = function(index) {
		$scope.selectedRow = index;

		$location.hash();
		$anchorScroll('anchor-' + index);

	}


	$scope.gotoAnchor = function(x) {
		var newHash = 'anchor' + x;


	}
    
        // 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:300px;clear:both;margin-left:20px;}
.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="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
        <link data-require="bootstrap-css@*" 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="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
        <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
        <script data-require="ui-bootstrap@*" 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>

      </head>

      <body ng-controller="MainCtrl">
        <div ng-view=""></div>
        
		<div class="filters">
        <h2>Filter results</h2>
        
    				<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">
    					<option value="">Select Region</option>
    				</select>
    				
    				<select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-options="state as state.StateName for state in selectRegion.States">
    					<option value="">Select State/Province/Country</option>
    				</select>
    				
    				<select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-options="city as city.CityName for city in selectState.Cities">
    					<option value="">Select City</option>
    				</select>
      </div>
      
      <div class="cart">
        <h1>Cart: {{cartCount}}</h1></div>
     <div class="item-list-wrapper">
    	 <table class="table table-condensed table-hover">
    	 	<tr ng-repeat="data in dataObject | filterBy: ['location.Region']: selectRegion | filterBy: ['state.StateName']: selectState | filterBy: ['city.CityName']: selectCity" ng-click="activeRow($index)">
    			<td class="column">{{data.Phase}}</td>
    			<td class="column col-num">{{data.Number}}</td>
    			<td class="column col-compound">{{data.Item}}</td>
    			<td>
      	      	  <span ng-repeat="location in data.Locations track by $index" class="region">{{ location.Region}}: 
      				<span ng-repeat="sites in location.Sites track by $index" class="state">
      					<span ng-repeat="item in sites.State track by $index | unique: 'item' ">{{item}}</span>
      					</span>
    				</span>
    			</td>
    			<td><a href="" ng-click="addToCart()">Add</a></td>
    		</tr>
    	 </table>
     </div>
      </body>

    </html>

最佳答案

问题出在 HTML 中，您在 sites.State 中重复，但那里没有任何数组，它只是一个字符串。

将 HTML 中的 item-list-wrapper 更改为此即可解决问题:

 <div class="item-list-wrapper">
     <table class="table table-condensed table-hover">
        <tr ng-repeat="data in dataObject | filterBy: ['location.Region']: selectRegion | filterBy: ['state.StateName']: selectState | filterBy: ['city.CityName']: selectCity" ng-click="activeRow($index)">
            <td class="column">{{data.Phase}}</td>
            <td class="column col-num">{{data.Number}}</td>
            <td class="column col-compound">{{data.Compound}}</td>
            <td>
        <span ng-repeat="location in data.Locations track by $index" class="region">{{ location.Region}}: 
                <span ng-repeat="site in location.Sites | unique: 'State'" class="state">{{site.State}}
                    </span>
                </span>
            </td>
            <td><a href="" ng-click="addToCart()">Add</a></td>
        </tr>
     </table>
 </div>

这是骗子:http://plnkr.co/edit/VmLjZmgLtDuds5CM7lKM?p=preview

关于过滤器的第二个问题，我将使用以下自定义过滤器来解决它:

app.filter('itemFilter', function() {
 return function(input,region,state) {
    if (!region)
      return input;
    return input.filter(function (x) {
      return x.Locations.some(function (y) {
        if (!state)
          return y.Region == region.Region;
        else
          return y.Sites.some(function (z) {
            return z.State == state.StateName;
          });
      });
    });
  };
});

app.filter('regionFilter', function() {
  return function(input,region,state) {
    if (!region)
      return input;
    return input.filter(function(y) {
      if (!state)
        return y.Region == region.Region;
      else
        return y.Sites.some(function (z) {
          return z.State == state.StateName;
        });
    });
  };
});

您可以在代码中使用它们，如下所示:

 <div class="item-list-wrapper">
     <table class="table table-condensed table-hover">
        <tr ng-repeat="data in dataObject | itemFilter:selectRegion:selectState" ng-click="activeRow($index)">
            <td class="column">{{data.Phase}}</td>
            <td class="column col-num">{{data.Number}}</td>
            <td class="column col-compound">{{data.Compound}}</td>
            <td>
        <span ng-repeat="location in data.Locations | regionFilter:selectRegion:selectState" class="region">{{ location.Region}}: 
                <span ng-repeat="site in location.Sites | unique: 'State' | filter: { State: selectState.StateName }" class="state">{{site.State}}
                    </span>
                </span>
            </td>
            <td><a href="" ng-click="addToCart()">Add</a></td>
        </tr>
     </table>
 </div>

这是骗子:http://plnkr.co/edit/liWYtMIC1rDktmBYQtjo?p=preview

关于javascript - AngularJS:使用多级 JSON 进行过滤和唯一性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33443826/

26 4 0
文章推荐： javascript - PHP Ajax 仅加载新内容
文章推荐： javascript - 了解将函数作为 JavaScript 变量传递时变量会发生什么情况
文章推荐： javascript - Reactjs:调用React.createClass block 内部和外部的方法
文章推荐： javascript - 如何更改条形颜色(谷歌图表可视化)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com