Question

我正在从JSON（国家/地区，城市）创建依赖关系下拉菜单。根据国家选择城市将进入第二次下拉。如果我得到country的值，则返回带有城市列表的对象。

请等待从github raw获取国家/地区下拉值。

＆＃13;

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

＆＃13;

<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="email" ng-model="users.email" placeholder="Email">
	<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
	<select ng-model="users.country" ng-change='populateCities()' ng-options="x for (x, y) in countriesToCities"></select>
	<select ng-hide="istrue" ng-model="users.city" ng-change='selectedCity()' ng-options="x for x in cityArray"></select>
	<button ng-click="pushInArray()">Add</button>
	<pre>{{userInfo}}</pre>
</div>

＆＃13;

如何获得国家的价值？

Answer 1

使用修改后的$scope.populateCities()，$scope.user = {}对象和ng-options的工作代码段来选择正确的国家/地区。

＆＃13;

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){
	$scope.countriesToCities = response.data;
	//console.log($scope.countriesToCities)
},function(response){
	console.log(response.status);
});

$scope.populateCities = function() {
  $scope.istrue = false;
  angular.forEach($scope.countriesToCities, function(values, key) {
      if($scope.user.country == key) {
	   $scope.cityArray = values;
      }
  });
}

$scope.pushInArray = function() {
  var user = angular.copy($scope.user);
  $scope.userInfo.push(user);
}
});

＆＃13;

<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>

＆＃13;

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

1 个答案: