Question

我列出了全球约1400个地点，并使用ng-repeat显示它们。我希望有一个下拉列表来缩小列表，使用过滤器功能，所以我只能在Region：Americas，Country：Canda中查看位置。我已经让下拉过滤器正常工作，但我的问题是更改下拉列表的值。如果我在第一个下拉列表中选择“区域”选项，则国家/地区下拉列表中只应包含该区域中的国家/地区。

这是我的模板：

Region:<select ng-model='RegionLocation.Region' ng-options="location.Region for location in RegionOptions.Regions"></select>
Country:<select ng-model='CountryLocation.Country' ng-options="location.Country for location in CountryOptions.Countries"></select>
<div>
    <md-card data-ng-repeat="location in LocationCtrl.Locationlist | filter:RegionFilter | filter:CountryFilter ">
        <md-card-content>
            <h2>{{::location.LID}}</h2>
        </md-card-content>
    </md-card>
</div>

这是我的Controller.js

function LocationController(LocationList, $scope) {
    var LocationCtrl = this;

    LocationCtrl.Locationlist = LocationList;

    LocationCtrl.Regions = filterRegions(LocationList);
    LocationCtrl.Regions.unshift({
        Region: 'Show All'
    })
    $scope.RegionOptions = {
        Regions:LocationCtrl.Regions,
    }
    $scope.RegionLocation = {
        Region: $scope.RegionOptions.Regions[0],
    }
    $scope.CountryOptions = {
        Countries:getCountries()
    };
    $scope.CountryLocation = {
        Country: $scope.CountryOptions.Countries[0]
    };
    $scope.RegionFilter = function (data) {
        if($scope.RegionLocation.Region.Region == 'Show All'){
            return true;
        } else if(data.Region == $scope.RegionLocation.Region.Region){
            return true;
        } else{
            return false;
        }
    };
    $scope.CountryFilter = function (data) {
        if($scope.CountryLocation.Country.Country == 'Show All'){
            return true;
        } else if(data.Country == $scope.CountryLocation.Country.Country){
            return true;
        } else{
            return false;
        }
    };
    function getCountries(){
        LocationCtrl.Countries = filterCountries(LocationList);
        LocationCtrl.Countries.unshift({
            Country: 'Show All'
        });
        return LocationCtrl.Countries;
    };
    function filterRegions(arr) {
      var f = []
      return arr.filter(function(n) {
        return f.indexOf(n.Region) == -1 && f.push(n.Region)
      })
    };
    function filterCountries(arr){
        var f = [];
        return arr.filter(function(n) {
            return f.indexOf(n.Country) == -1 && f.push(n.Country)
        })
    };

}

我也理解我的代码不是超级干净也不简单，所以建议简化它是非常受欢迎的。

谢谢！

Answer 1

见Plunker，我必须更改国家和地区的值以区分，因为两个对象的值都相同。

Answer 2

你在ng-repeat上使用过滤器是正确的轨道，这是我如何根据一些模拟数据设法使其工作。使用过滤器完成此操作非常简单。我希望这会有所帮助。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.name = 'Sup World';

  $scope.list = [{
    "LID": "AB02",
    "City": "Calgary",
    "State": "Alberta",
    "Country": "Canada",
    "Region": "Americas",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXX"
  }, {
    "LID": "AB08",
    "City": "Canmore",
    "State": "Alberta",
    "Country": "Canada",
    "Region": "Americas",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXXXX"
  }, {
    "LID": "AB09",
    "City": "Cape Town",
    "State": "Western Cape",
    "Country": "South Africa",
    "Region": "Africa",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXXXX"
  }, {
    "LID": "AB12",
    "City": "Eish",
    "State": "Somewhere",
    "Country": "Zimbabwe",
    "Region": "Africa",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXX"
  }, {
    "LID": "AB18",
    "City": "Lusaka",
    "State": "Zambia?",
    "Country": "Zambia",
    "Region": "Africa",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXXXX"
  }, {
    "LID": "AB19",
    "City": "Durban",
    "State": "Kwazulu Natal",
    "Country": "South Africa",
    "Region": "Africa",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXXXX"
  }, {
    "LID": "AB13",
    "City": "Pretoria",
    "State": "JoJo",
    "Country": "South Africa",
    "Region": "Africa",
    "Latitude": "XXXXXX",
    "Longitude": "XXXXXXX"
  }];

  $scope.region = [];
  //get unique regions
  $scope.regions = $filter('unique')($scope.list, "Region");

  $scope.country = [];
  //get unique countries
  $scope.countries = $filter('unique')($scope.list, "Country");

});

app.filter('unique', function() {
  return function(arr, field) {
    var o = {},
      i, l = arr.length,
      r = [];
    for (i = 0; i < l; i += 1) {
      o[arr[i][field]] = arr[i];
    }
    for (i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  Region:
  <select ng-model='region' ng-options="location.Region for location in regions"></select> 
Country: 
<select ng-model='country' ng-options="location.Country for location in countries | filter:{'Region': region.Region }"></select>
  <div>
    <md-card data-ng-repeat="location in list | filter:{'Region':region.Region,'Country':country.Country} ">
      <md-card-content>
        <h2>{{::location.LID}}</h2>
      </md-card-content>
    </md-card>
  </div>
</body>

</html>

AngularJS根据ng-repeat过滤器的DropDown值更改DropDowns

2 个答案: