Question

我是Angularjs的新手。我想从json文件中读取数据并根据下拉列表中选择的项目显示数据。例如，如果我在下拉列表区域中选择特定的“区域”，它将仅显示该区域的数据。任何暗示这样做。我的控制器功能。提前谢谢。

 var app = angular.module('myApp', []);
 app.controller('customersCtrl', function($scope, $http) {

    $http.get("http://localhost:8080/portalserver/static/launchpad/data.json") .success(function (response){
                  $scope.names = response.regions;
                  angular.forEach(data.regions,function(key,value){
                                  $scope.regions.push(value);
                 });
       });

我已经通过在$ http.get（）方法中提供文件名来完成从本地系统访问的代码。但对于上面的网址，它不起作用。显示错误“同源策略禁止在localhost读取远程资源：8080 / portalserver / static / launchpad / data.json。可以通过将资源移动到同一域或启用COR来修复此问题”

Answer 1

I have created a plunker for you。希望这能解决你的问题。

在我的代码中，我创建了下拉列表和几个span标签。当我在调用getChange（ID）函数时在控制器中设置ng-show值（true或false）时，会渲染范围。

    <select ng-model="dropdownModel" ng-options="dropdown.ID as dropdown.Title for dropdown in dropdowns" ng-change="getChange(dropdownModel)"></select>
      <br><br>
        <span ng-show="showAL">Selected Alabama</span>\
        <span ng-show="showFL">Selected Florida</span>
        <span ng-show="showCA">Selected California</span> 
  <span ng-show="showDE">Selected Delaware</span>

我的控制器代码

$scope.getChange = function(dID) {
    if (dID === 'AL') {
      $scope.showAL = true;
    } else {
      $scope.showAL = false;
    }

    if (dID === 'FL') {
      $scope.showFL = true;
    } else {
      $scope.showFL = false;
    }

    if (dID === 'CA') {
      $scope.showCA = true;
    } else {
      $scope.showCA = false;
    }

    if (dID === 'DE') {
      $scope.showDE = true;
    } else {
      $scope.showDE = false;
    }
  };

Answer 2

如果需要，您可以在页面上或控制器上使用角度过滤器。

在页面上显示基于 selectedRegion

的注册表

<div ng-repeat="region in regions | filter:selectedRegion">
    <span>{{region.name}}</td>
</div>

您可以在此处查看有关过滤器的更多详情 Angular Js Filter

读取Json数据并使用angularjs根据下拉选项列表显示它

2 个答案: