使用angularjs读取Json数据并根据下拉选择列表显示答案

【问题标题】：Read Json data and display it according to drop down selcect list using angularjs使用angularjs读取Json数据并根据下拉选择列表显示
【发布时间】：2015-12-09 16:54:00
【问题描述】：

我是 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 来解决”

【问题讨论】：

你的json文件的结构是什么？
一种方法是设置过滤器并仅显示特定区域的数据
显示json对象
编译代码时有什么问题吗？？？
我已经通过在 $http.get() 方法中给出文件名来完成从本地系统访问的代码。但对于上面的网址，它不起作用。显示错误“同源策略不允许读取位于 localhost:8080/portalserver/static/launchpad/data.json 的远程资源。这可以通过将资源移动到同一域或启用 COR 来解决”。

标签： json angularjs

【解决方案1】：

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

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

    <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;
    }
  };

【讨论】：

【解决方案2】：

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

基于selectedRegion

的页面显示区域

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

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

【讨论】：