2017-04-22 25 views
-1

我想從json對象顯示國家名稱。 json數據查看數組對象的集合,該對象使用ng-repeat迭代該json數據並顯示到選擇框中。我嘗試了以下的代碼。如何在角js中使用Array對象json創建選擇框?

Json 
---- 

$scope.countries = [ 
    { 
    "AT": "Austria" 
    }, 
    { 
    "CI": "Côte d'Ivoire" 
    }, 
    { 
    "CG": "Congo" 
    }, 
    { 
    "SV": "El Salvador" 
    }, 
    { 
    "IN": "India" 
    }, 
    { 
    "SX": "Sint Maarten (Dutch part)" 
    }, 
    { 
    "SZ": "Swaziland" 
    }, 
    { 
    "CH": "Switzerland" 
    }, 
    { 
    "AE": "United Arab Emirates" 
    } 
] 

html 
---- 
<select ng-model="counryNames" > 
      <option ng-repeat="(key,country) in countries" value="{{key}}">{{country[key]}}</option> 
    </select> 
+0

是什麼問題? – Sajeetharan

+0

選擇框空我更新jsfiddle請檢查一次http://jsfiddle.net/HB7LU/29324/ –

+0

檢查答案 – Sajeetharan

回答

0

更改您的NG-重複的,你要訪問的countries沒有country

<option ng-repeat="(key, value) in countries" value="{{key}}">{{countries[key]}}</option> 

DEMO

angular.module("myapp", []) 
 
     .controller("MyController", function($scope) { 
 
     $scope.countries = [{ 
 
      "AT": "Austria" 
 
      }, { 
 
      "CI": "Côte d'Ivoire" 
 
      }, { 
 
      "CG": "Congo" 
 
      }, { 
 
      "SV": "El Salvador" 
 
      }, { 
 
      "IN": "India" 
 
      }, { 
 
      "SX": "Sint Maarten (Dutch part)" 
 
      }, { 
 
      "SZ": "Swaziland" 
 
      }, { 
 
      "CH": "Switzerland" 
 
      }, { 
 
      "AE": "United Arab Emirates" 
 
      }]; 
 
     });
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myapp"> 
 
    <div ng-controller="MyController"> 
 
    <select> 
 
    <option ng-repeat="(key, value) in countries" value="{{key}}">{{countries[key]}}</option> 
 
</select> 
 
    </div> 
 
</body>

關鍵3210
+0

只有我需要顯示國名,怎麼辦? –

+0

您需要更改json格式 – Sajeetharan

+0

我只需要這種格式,我需要怎樣做? –