AngularJs - 从ng-model（ng-option）获取价值

Question

我从JSON（国家，城市）创建依赖关系下拉菜单。根据国家选择，城市将在第二个下拉列表中填充。如果我得到国家的价值它返回对象与城市列表。

请等待从github raw得到国家下拉值。

var app = angular.module('myApp',[]) 
 
app.controller('dropdown', function($scope, $http){ 
 
\t $scope.istrue = true; 
 
\t $scope.userInfo = []; 
 

 
\t $http.get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json').then(function(response){ 
 
\t \t $scope.countriesToCities = response.data; 
 
\t \t //console.log($scope.countriesToCities) 
 
\t },function(response){ 
 
\t \t console.log(response.status); 
 
\t }); 
 
\t 
 
\t $scope.populateCities = function() { 
 
\t \t $scope.istrue = false; 
 
\t \t //console.log($scope); 
 
\t \t $scope.cityArray = $scope.users.country; 
 
\t } 
 
\t 
 
\t $scope.selectedCity = function(){ 
 
\t \t console.log($scope.city) 
 
\t } 
 
\t 
 
\t $scope.pushInArray = function() { 
 
\t \t var user = angular.copy($scope.users); 
 
\t \t $scope.userInfo.push(user); 
 
\t } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="dropdown"> 
 
\t <input type="text" name="name" ng-model="users.name" placeholder="Name"> 
 
\t <input type="text" name="email" ng-model="users.email" placeholder="Email"> 
 
\t <input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number"> 
 
\t <select ng-model="users.country" ng-change='populateCities()' ng-options="x for (x, y) in countriesToCities"></select> 
 
\t <select ng-hide="istrue" ng-model="users.city" ng-change='selectedCity()' ng-options="x for x in cityArray"></select> 
 
\t <button ng-click="pushInArray()">Add</button> 
 
\t <pre>{{userInfo}}</pre> 
 
</div>

如何获得国家的价值？

Answer 1

修改后的工作片段$scope.populateCities(),$scope.user = {}对象和ng选项可选择正确的国家/地区。

var app = angular.module('myApp',[]) 
 
app.controller('dropdown', function($scope, $http){ 
 
$scope.istrue = true; 
 
$scope.userInfo = []; 
 
$scope.user = {}; 
 

 
$http.get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json').then(function(response){ 
 
\t $scope.countriesToCities = response.data; 
 
\t //console.log($scope.countriesToCities) 
 
},function(response){ 
 
\t console.log(response.status); 
 
}); 
 

 
$scope.populateCities = function() { 
 
    $scope.istrue = false; 
 
    angular.forEach($scope.countriesToCities, function(values, key) { 
 
     if($scope.user.country == key) { 
 
\t $scope.cityArray = values; 
 
     } 
 
    }); 
 
} 
 

 
$scope.pushInArray = function() { 
 
    var user = angular.copy($scope.user); 
 
    $scope.userInfo.push(user); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="dropdown"> 
 
    <input type="text" name="name" ng-model="users.name" placeholder="Name"> 
 
    <input type="text" name="name" ng-model="user.name" placeholder="Name"> 
 
    <input type="text" name="email" ng-model="user.email" placeholder="Email"> 
 
    <input type="text" name="phoneNo" ng-model="user.phoneNo" placeholder="phone Number"> 
 
    <select ng-model="user.country" ng-change='populateCities()' ng-options="country as country for (country, cities) in countriesToCities"></select> 
 
    <select ng-hide="istrue" ng-model="user.city" ng-change='selectedCity()' ng-options="x for x in cityArray"></select> 
 
    <button ng-click="pushInArray()">Add</button> 
 
    <pre>{{userInfo}}</pre> 
 
</div>