如何在angularjs中創建多維數組作用域？

Question

我有一個json值，其中包含國家和國家列表的列表。我需要應該改變基於國家這些價值分成兩個範圍

$ scope.countries和國家沙爹變化$ scope.states

。

這裏是我的示例JSON

{"country":[{"name":"Aruba","state":[{"name":"\u00e2\u20ac\u201c"}]},{"name":"Afghanistan","state":[{"name":"Balkh"},{"name":"Herat"},{"name":"Kabol"},{"name":"Qandahar"}]},{"name":"Angola","state":[{"name":"Benguela"},{"name":"Huambo"},{"name":"Luanda"},{"name":"Namibe"}]},{"name":"Anguilla","state":[{"name":"\u00e2\u20ac\u201c"}]},{"name":"Albania","state":[{"name":"Tirana"}]},{"name":"Andorra","state":[{"name":"Andorra la Vella"}]},{"name":"Netherlands Antilles","state":[{"name":"Cura\u00c3\u00a7ao"}]},{"name":"United Arab Emirates","state":[{"name":"Abu Dhabi"},{"name":"Ajman"},{"name":"Dubai"},{"name":"Sharja"}]},{"name":"Argentina","state":[{"name":"Buenos Aires"},{"name":"Catamarca"},{"name":"C\u00c3\u00b3rdoba"},{"name":"Chaco"},{"name":"Chubut"},{"name":"Corrientes"},{"name":"Distrito Federal"},{"name":"Entre Rios"},{"name":"Formosa"},{"name":"Jujuy"},{"name":"La Rioja"},{"name":"Mendoza"},{"name":"Misiones"},{"name":"Neuqu\u00c3\u00a9n"},{"name":"Salta"},{"name":"San Juan"},{"name":"San Luis"},{"name":"Santa F\u00c3\u00a9"},{"name":"Santiago del Estero"},{"name":"Tucum\u00c3\u00a1n"}]},{"name":"Armenia","state":[{"name":"Lori"},{"name":"Yerevan"},{"name":"\u00c5 irak"}]},{"name":"American Samoa","state":[{"name":"Tutuila"}]},{"name":"Antarctica"},{"name":"French Southern territories"},{"name":"Antigua and Barbuda","state":[{"name":"St John"}]},{"name":"Australia","state":[{"name":"Capital Region"},{"name":"New South Wales"},{"name":"Queensland"},{"name":"South Australia"},{"name":"Tasmania"},{"name":"Victoria"},{"name":"West Australia"}]},{"name":"Austria","state":[{"name":"K\u00c3\u00a4rnten"},{"name":"North Austria"},{"name":"Salzburg"},{"name":"Steiermark"},{"name":"Tiroli"},{"name":"Wien"}]},{"name":"Azerbaijan","state":[{"name":"Baki"},{"name":"G\u00c3\u00a4nc\u00c3\u00a4"}]},{"name":"Saudi Arabia","state":[{"name":"al-Khudud al-Samaliy"},{"name":"al-Qasim"},{"name":"al-Sharqiya"},{"name":"Asir"},{"name":"Hail"},{"name":"Medina"},{"name":"Mekka"},{"name":"Najran"},{"name":"Qasim"},{"name":"Riad"},{"name":"Riyadh"},{"name":"Tabuk"}]},{"name":"Sudan","state":[{"name":"al-Bahr al-Abyad"},{"name":"al-Bahr al-Ahmar"},{"name":"al-Jazira"},{"name":"al-Qadarif"},{"name":"Bahr al-Jabal"},{"name":"Darfur al-Janubiya"},{"name":"Darfur al-Shamaliya"},{"name":"Kassala"},{"name":"Khartum"},{"name":"Kurdufan al-Shamaliy"}]},{"name":"Senegal","state":[{"name":"Cap-Vert"},{"name":"Diourbel"},{"name":"Kaolack"},{"name":"Saint-Louis"},{"name":"Thi\u00c3\u00a8s"},{"name":"Ziguinchor"}]},{"name":"Singapore","state":[{"name":"\u00e2\u20ac\u201c"}]},{"name":"South Georgia and the South Sa"},{"name":"Saint Helena","state":[{"name":"Saint Helena"}]},{"name":"Svalbard and Jan Mayen","state":[{"name":"L\u00c3\u00a4nsimaa"}]},{"name":"Solomon Islands","state":[{"name":"Honiara"}]},{"name":"Sierra Leone","state":[{"name":"Western"}]},{"name":"El Salvador","state":[{"name":"La Libertad"},{"name":"San Miguel"},{"name":"San Salvador"},{"name":"Santa Ana"}]},{"name":"San Marino","state":[{"name":"San Marino"},{"name":"Serravalle\/Dogano"}]},{"name":"Somalia","state":[{"name":"Banaadir"},{"name":"Jubbada Hoose"},{"name":"Woqooyi Galbeed"}]},{"name":"Saint Pierre and Miquelon","state":[{"name":"Saint-Pierre"}]},{"name":"Sao Tome and Principe","state":[{"name":"Aqua Grande"}]},{"name":"Suriname","state":[{"name":"Paramaribo"}]},{"name":"Slovakia","state":[{"name":"Bratislava"},{"name":"V\u00c3\u00bdchodn\u00c3\u00a9 Slovensko"}]},{"name":"Slovenia","state":[{"name":"Osrednjeslovenska"},{"name":"Podravska"}]},{"name":"Sweden","state":[{"name":"\u00c3\u2013rebros l\u00c3\u00a4n"},{"name":"East G\u00c3\u00b6tanmaan l\u00c3\u00a4n"},{"name":"G\u00c3\u00a4vleborgs l\u00c3\u00a4n"},{"name":"J\u00c3\u00b6nk\u00c3\u00b6pings l\u00c3\u00a4n"},{"name":"Lisboa"},{"name":"Sk\u00c3\u00a5ne l\u00c3\u00a4n"},{"name":"Uppsala l\u00c3\u00a4n"},{"name":"V\u00c3\u00a4sterbottens l\u00c3\u00a4n"},{"name":"V\u00c3\u00a4sternorrlands l\u00c3\u00a4"},{"name":"V\u00c3\u00a4stmanlands l\u00c3\u00a4n"},{"name":"West G\u00c3\u00b6tanmaan l\u00c3\u00a4n"}]},{"name":"Swaziland","state":[{"name":"Hhohho"}]},{"name":"Seychelles","state":[{"name":"Mah\u00c3\u00a9"}]},{"name":"Syria","state":[{"name":"al-Hasaka"},{"name":"al-Raqqa"},{"name":"Aleppo"},{"name":"Damascus"},{"name":"Damaskos"},{"name":"Dayr al-Zawr"},{"name":"Hama"},{"name":"Hims"},{"name":"Idlib"},{"name":"Latakia"}]},{"name":"Turks and Caicos Islands","state":[{"name":"Grand Turk"}]},{"name":"Chad","state":[{"name":"Chari-Baguirmi"},{"name":"Logone Occidental"}]},{"name":"Togo","state":[{"name":"Maritime"}]},{"name":"Thailand","state":[{"name":"Bangkok"},{"name":"Chiang Mai"},{"name":"Khon Kaen"},{"name":"Nakhon Pathom"},{"name":"Nakhon Ratchasima"},{"name":"Nakhon Sawan"},{"name":"Nonthaburi"},{"name":"Songkhla"},{"name":"Ubon Ratchathani"},{"name":"Udon Thani"}]},{"name":"Tajikistan","state":[{"name":"Karotegin"},{"name":"Khujand"}]},{"name":"Tokelau","state":[{"name":"Fakaofo"}]},{"name":"Turkmenistan","state":[{"name":"Ahal"},{"name":"Dashhowuz"},{"name":"Lebap"},{"name":"Mary"}]},{"name":"East Timor","state":[{"name":"Dili"}]},{"name":"Tonga","state":[{"name":"Tongatapu"}]},{"name":"Trinidad and Tobago","state":[{"name":"Caroni"},{"name":"Port-of-Spain"}]},{"name":"Tunisia","state":[{"name":"Ariana"},{"name":"Biserta"},{"name":"Gab\u00c3\u00a8s"},{"name":"Kairouan"},{"name":"Sfax"},{"name":"Sousse"},{"name":"Tunis"}]},{"name":"Turkey","state":[{"name":"Adana"},{"name":"Adiyaman"},{"name":"Afyon"},{"name":"Aksaray"},{"name":"Ankara"},{"name":"Antalya"},{"name":"Aydin"},{"name":"\u00c3\u2021orum"},{"name":"Balikesir"},{"name":"Batman"},{"name":"Bursa"},{"name":"Denizli"},{"name":"Diyarbakir"},{"name":"Edirne"},{"name":"El\u00c3\u00a2zig"},{"name":"Erzincan"},{"name":"Erzurum"},{"name":"Eskisehir"},{"name":"Gaziantep"},{"name":"Hatay"},{"name":"I\u00c3\u00a7el"},{"name":"Isparta"},{"name":"Istanbul"},{"name":"Izmir"},{"name":"Kahramanmaras"},{"name":"Karab\u00c3\u00bck"},{"name":"Karaman"},{"name":"Kars"},{"name":"Kayseri"},{"name":"K\u00c3\u00bctahya"},{"name":"Kilis"},{"name":"Kirikkale"},{"name":"Kocaeli"},{"name":"Konya"},{"name":"Malatya"},{"name":"Manisa"},{"name":"Mardin"},{"name":"Ordu"},{"name":"Osmaniye"},{"name":"Sakarya"},{"name":"Samsun"},{"name":"Sanliurfa"},{"name":"Siirt"},{"name":"Sivas"},{"name":"Tekirdag"},{"name":"Tokat"},{"name":"Trabzon"},{"name":"Usak"},{"name":"Van"},{"name":"Zonguldak"}]},{"name":"Tuvalu","state":[{"name":"Funafuti"}]},{"name":"Taiwan","state":[{"name":""},{"name":"Changhwa"},{"name":"Chiayi"},{"name":"Hsinchu"},{"name":"Hualien"},{"name":"Ilan"},{"name":"Kaohsiung"},{"name":"Keelung"},{"name":"Miaoli"},{"name":"Nantou"},{"name":"Pingtung"},{"name":"Taichung"},{"name":"Tainan"},{"name":"Taipei"},{"name":"Taitung"},{"name":"Taoyuan"},{"name":"Y\u00c3\u00bcnlin"}]},{"name":"Tanzania","state":[{"name":"Arusha"},{"name":"Dar es Salaam"},{"name":"Dodoma"},{"name":"Kilimanjaro"},{"name":"Mbeya"},{"name":"Morogoro"},{"name":"Mwanza"},{"name":"Tabora"},{"name":"Tanga"},{"name":"Zanzibar West"}]},{"name":"Uganda","state":[{"name":"Central"}]},{"name":"Ukraine","state":[{"name":"Dnipropetrovsk"},{"name":"Donetsk"},{"name":"Harkova"},{"name":"Herson"},{"name":"Hmelnytskyi"},{"name":"Ivano-Frankivsk"},{"name":"Kiova"},{"name":"Kirovograd"},{"name":"Krim"},{"name":"Lugansk"},{"name":"Lviv"},{"name":"Mykolajiv"},{"name":"Odesa"},{"name":"Pultava"},{"name":"Rivne"},{"name":"Sumy"},{"name":"Taka-Karpatia"},{"name":"Ternopil"},{"name":"T\u00c5\u00a1erkasy"},{"name":"T\u00c5\u00a1ernigiv"},{"name":"T\u00c5\u00a1ernivtsi"},{"name":"Vinnytsja"},{"name":"Volynia"},{"name":"Zaporizzja"},{"name":"Zytomyr"}]},{"name":"United States Minor Outlying I"},{"name":"Uruguay","state":[{"name":"Montevideo"}]},{"name":"United States","state":[{"name":"Alabama"},{"name":"Alaska"},{"name":"Arizona"},{"name":"Arkansas"},{"name":"California"},{"name":"Colorado"},{"name":"Connecticut"},{"name":"District of Columbia"},{"name":"Florida"},{"name":"Georgia"},{"name":"Hawaii"},{"name":"Idaho"},{"name":"Illinois"},{"name":"Indiana"},{"name":"Iowa"},{"name":"Kansas"},{"name":"Kentucky"},{"name":"Louisiana"},{"name":"Maryland"},{"name":"Massachusetts"},{"name":"Michigan"},{"name":"Minnesota"},{"name":"Mississippi"},{"name":"Missouri"},{"name":"Montana"},{"name":"Nebraska"},{"name":"Nevada"},{"name":"New Hampshire"},{"name":"New Jersey"},{"name":"New Mexico"},{"name":"New York"},{"name":"North Carolina"},{"name":"Ohio"},{"name":"Oklahoma"},{"name":"Oregon"},{"name":"Pennsylvania"},{"name":"Rhode Island"},{"name":"South Carolina"},{"name":"South Dakota"},{"name":"Tennessee"},{"name":"Texas"},{"name":"Utah"},{"name":"Virginia"},{"name":"Washington"},{"name":"Wisconsin"}]},{"name":"Uzbekistan","state":[{"name":"Andijon"},{"name":"Buhoro"},{"name":"Cizah"},{"name":"Fargona"},{"name":"Karakalpakistan"},{"name":"Khorazm"},{"name":"Namangan"},{"name":"Navoi"},{"name":"Qashqadaryo"},{"name":"Samarkand"},{"name":"Surkhondaryo"},{"name":"Toskent"},{"name":"Toskent Shahri"}]},{"name":"Holy See (Vatican City State)","state":[{"name":"\u00e2\u20ac\u201c"}]},{"name":"Saint Vincent and the Grenadin"},{"name":"Venezuela","state":[{"name":""},{"name":"Anzo\u00c3\u00a1tegui"},{"name":"Apure"},{"name":"Aragua"},{"name":"Barinas"},{"name":"Bol\u00c3\u00advar"},{"name":"Carabobo"},{"name":"Distrito Federal"},{"name":"Falc\u00c3\u00b3n"},{"name":"Gu\u00c3\u00a1rico"},{"name":"Lara"},{"name":"M\u00c3\u00a9rida"},{"name":"Miranda"},{"name":"Monagas"},{"name":"Portuguesa"},{"name":"Sucre"},{"name":"T\u00c3\u00a1chira"},{"name":"Trujillo"},{"name":"Yaracuy"},{"name":"Zulia"}]},{"name":"Virgin Islands, British","state":[{"name":"Tortola"}]},{"name":"Virgin Islands, U.S.","state":[{"name":"St Thomas"}]},{"name":"Vietnam","state":[{"name":"An Giang"},{"name":"Ba Ria-Vung Tau"},{"name":"Bac Thai"},{"name":"Binh Dinh"},{"name":"Binh Thuan"},{"name":"Can Tho"},{"name":"Dac Lac"},{"name":"Dong Nai"},{"name":"Haiphong"},{"name":"Hanoi"},{"name":"Ho Chi Minh City"},{"name":"Khanh Hoa"},{"name":"Kien Giang"},{"name":"Lam Dong"},{"name":"Nam Ha"},{"name":"Nghe An"},{"name":"Quang Binh"},{"name":"Quang Nam-Da Nang"},{"name":"Quang Ninh"},{"name":"Thua Thien-Hue"},{"name":"Tien Giang"}]},{"name":"Vanuatu","state":[{"name":"Shefa"}]},{"name":"Wallis and Futuna","state":[{"name":"Wallis"}]},{"name":"Samoa","state":[{"name":"Upolu"}]},{"name":"Yemen","state":[{"name":"Aden"},{"name":"Hadramawt"},{"name":"Hodeida"},{"name":"Ibb"},{"name":"Sanaa"},{"name":"Taizz"}]},{"name":"Yugoslavia","state":[{"name":"Central Serbia"},{"name":"Kosovo and Metohija"},{"name":"Montenegro"},{"name":"Vojvodina"}]},{"name":"South Africa","state":[{"name":"Eastern Cape"},{"name":"Free State"},{"name":"Gauteng"},{"name":"KwaZulu-Natal"},{"name":"Mpumalanga"},{"name":"North West"},{"name":"Northern Cape"},{"name":"Western Cape"}]}]} 

這裏控制器的js代碼

$scope.states = []; 
     $scope.countries = []; 
     var arrayState = []; 
    $http.get(site_url+'assets/countrylist.json').success(function(data) 
    { 
     angular.forEach(data.country, function(value,key) 
      { 
       $scope.countries[key] = value.name; 

       angular.forEach(value.state, function(stateItem,statekey) 
       { 

        $scope.states[key][statekey] = stateItem.name ; 
        console.log($scope.states); 

       }); 
      }); 

     }); 

HTML

<select id="deployCountry" name="deployCountry" ng-options="cn as cn for cn in countries" ng-model="selectedCountry" ng-change="changeCountry(selectedCountry)"> 
        <option value="">Select Country</option> 
       </select>      

Angularjs上變化功能在這裏

$scope.changeCountry = function(countrySelected) 
     { 
      $scope.state = $scope.states[countrySelected] 
     }; 

onchange我需要填寫所選國家的國家。

我如何實現這一點。上面的代碼表示錯誤預先

Answer 1

第一「不能設置屬性‘0’未定義」在這條線上$scope.states[key][statekey] = stateItem.name ;

謝謝，data.country是一個數組，而不是一個對象。第一的forEach應該是：

angular.forEach(data.country, function (value) { 
    $scope.countries.push(value.name); 
    // ... 
} 

，而不是通用名稱value的，將其命名country。這會更容易閱讀，而且更不容易出錯。

對於第二個對於每個都有同樣的問題。總之，你應該得到類似的東西：

$scope.countries = []; 
$scope.states = {}; // states indexed by country name 

angular.forEach(data.country, function (country) { 
    $scope.countries.push(country.name); 

    $scope.states[country.name] = [] 
    angular.forEach(country.state, function(state) { 
     $scope.states[country.name].push(state.name); 
    }); 
}); 

見fiddle