閱讀Json數據並使用angularjs按照下拉列表顯示它

我是Angularjs的新手。我想從json文件讀取數據並根據下拉列表中選擇的項目顯示數據。例如，如果我在下拉列表區域中選擇特定的「區域」，它將僅顯示該區域的數據。任何暗示做到這一點。我的控制器功能。在此先感謝。閱讀Json數據並使用angularjs按照下拉列表顯示它

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來解決此問題」

來源

2015-11-19 Amit

什麼是您的JSON文件的結構？ – MayK

這樣做的一種方法是設置一個過濾器並僅顯示特定區域的數據 – MayK

顯示json對象 –

I have created a plunker for you檢查過濾器的更多細節。希望這可以解決你的問題。

在我的代碼中，我創建了下拉菜單和幾個span標籤。當我在調用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; 
    } 
    };

來源

2015-12-09 08:54:00

-1

您可以使用如果需要，可以在頁面或控制器上使用角度篩選器。

上selectedRegion

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

的基礎上，顯示頁面regins你可以在這裏 Angular Js Filter

來源

2015-11-19 10:23:18 Anita

閱讀Json數據並使用angularjs按照下拉列表顯示它

回答

相關問題