Javascript - 爲什麼這片可靠的下拉式Angular JS代碼不起作用？

我試圖用AngularJSJavascript - 爲什麼這片可靠的下拉式Angular JS代碼不起作用？

實施國家城市可靠的下拉

<div> 
     Country: 
     </br> 
     <select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country)"> 
      <option value="">Select country</option> 
     </select> 
    </div> 
    <div> 
     City</br> 
     <select data-ng-model="city" data-ng-options="city.name for city in countryItem"> 
      <option value="">Select city</option> 
     </select> 
    </div>

控制器代碼

$scope.updateCountry = function(selectedCountry) 
    { 
     console.log("The selected country is 
"+JSON.stringify(selectedCountry)); 

     HomeFactory.setTappedCountryData(selectedCountry); 

     $scope.countryItem = HomeFactory.getTappedCountryData(); 

     console.log("The country Item is "+JSON.stringify($scope.countryItem)); 
    }

工廠代號

function setTappedCountryData(data){  
    console.log(JSON.stringify(data));  
    selectedCountry = data;  
}; 


    function getTappedCountryData(data){   
     console.log(JSON.stringify(data));  
    return selectedCountry;  
};

JSON數據

[{ 
     "id": "1", "name":"USA", 
      "cities": [{ 
      "id": "1", 
       "name": "New York" 
     }, { 
      "id": "2", 
       "name": "Los Angeles" 
     }] 
    }, { 
     "id": "2", "name":"UK", 
      "cities": [{ 
      "id": "3", 
       "name": "London" 
     }, { 
      "id": "4", 
       "name": "Glasgow" 
     }] 
    }, 
    { 
     "id": "3", "name":"Russia", 
      "cities": [{ 
      "id": "5", 
       "name": "Moscow" 
     }, { 
      "id": "6", 
       "name": "St. Petersburg" 
     }] 
    }, 
    { 
     "id": "4", "name":"Spain", 
      "cities": [{ 
      "id": "7", 
       "name": "Madrid" 
     }, { 
      "id": "8", 
       "name": "Barcelona" 
     }] 
    }, 
    { 
     "id": "5", "name":"India", 
      "cities": [{ 
      "id": "9", 
       "name": "Delhi" 
     }, { 
      "id": "10", 
       "name": "Mumbai" 
     }] 
    }]

我無法在第二個下拉列表中找到特定國家/地區的城市。我在哪裏犯錯？

哈迪Jeddizahed已經解決了這個問題

唯一的問題是代碼沒有在Chrome工作develper移動模擬器（對於類似iphone6移動裝置，的Nexus 6等）

來源

2017-04-16 msm0204

實際上你的'getTappedCountryData（）'函數不返回任何城市這樣做的控制器，它的錯誤，糾正它可以解決問題，或嘗試在更好的實踐的答案下。 – Sachin

@Sachin bro一個國家會在第一或國家下拉菜單中違約，讓印度成爲默認國家。再次，一個城市將成爲第二個下拉菜單的默認值 - 例如紐約的美國，倫敦的英國，俄羅斯的莫斯科，西班牙的馬德里和印度的德里。我無法在第二個下拉列表 – msm0204

的第一個下拉列表和默認城市中爲該特定國家/地區實施默認國家或相應地更改相應問題，或者爲此創建一個新問題。 – Sachin

嘗試這樣。你也可以用簡單的方式

$scope.updateCountry = function(selectedCountry) { 
    $scope.countryItem = selectedCountry.cities 
}

，並考慮與此類似

<select data-ng-model="city" data-ng-options="city.name for city in country.cities"> 
     <option value="">Select city</option> 
</select>

DEMO

來源

2017-04-16 15:39:08

哥哥它的工作，但我有更多的請求給你 - 一個國家將在第一個國家或國家放棄讓印度成爲違約國。再次，一個城市將成爲第二個下拉菜單的默認設置 - 例如美國的紐約，英國的倫敦，俄羅斯的莫斯科，西班牙的馬德里和印度的德里。我無法實現默認國家在第一下拉＆默認城市爲該特定國家在第二下拉 – msm0204

兄弟upvoted你並接受你的回答 – msm0204

它應該是這樣的。 '$ scope.country = $ scope.countries [4];' '$ scope.city = $ scope.countries [4] .cities [0];' –

Javascript - 爲什麼這片可靠的下拉式Angular JS代碼不起作用？

回答

相關問題