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代码不起作用？

回答

相关问题