2017-01-18 2 views
0

У меня есть данные ниже заданного форматdocument.getElementById («»). Значение возвращает объект вместо дорожит

{ 
USA: { 
    CA: { 'SAN FRANCISCO':['94188', '94158', '94143'] }, 
    LA: { 'BATON ROUGE':['70898','70895','70891'] } 
    } 
} 

пытается добавить их в зависимое раскрывающемся меню, а именно страна, штат, город и почтовый индекс. Я использую ng-option, но при получении значения для dropdown страны возвращается возвращаемый объект: 16 вместо значения.

$scope.countries = { 
    USA: { 
     CA: { 'SAN FRANCISCO':['94188', '94158', '94143'] }, 
     LA: { 'BATON ROUGE':['70898','70895','70891'] } 
    } 
} 

$scope.GetSelectedCountry = function() { 
    $scope.strCountry = document.getElementById("country").value; 
} 

<b>Country:</b> 
&nbsp; 
<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
<option value=''>Select Country</option> 

ответ

1

Вы использовали ng-model для вашего тега select, но вы не использовали это в своем контроллере для получения выбранного значения. Нет необходимости обращаться к значению с помощью javascript dom selector, вместо этого вы можете напрямую использовать значение модели тега select $scope.statessource.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function ($scope) { 
 
      $scope.countries = { 
 
       USA: { 
 
        CA: { 
 
         'SAN FRANCISCO': ['94188', '94158', '94143'] 
 
        }, 
 
        LA: { 
 
         'BATON ROUGE': ['70898', '70895', '70891'] 
 
        } 
 
       } 
 
      } 
 

 
      $scope.GetSelectedCountry = function() { 
 
       $scope.strCountry = $scope.statessource; 
 
       console.log($scope.strCountry); 
 
      } 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <b>Country:</b> &nbsp; 
 
    <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> 
 
     <option value=''>Select Country</option> 
 
    </select> 
 

 
</body> 
 

 
</html>

-2

Способ получения доступа к выбранному значение в OPTION вложен в SELECT здесь:

var e = document.getElementById("country"); 
var value = e.options[e.selectedIndex].value; 
var text = e.options[e.selectedIndex].text; 
+1

Это не angularjs путь – Weedoze

3

Это не Угловая путь для получения значений.

Вы используете <select ng-model="statessource" ...>, поэтому значение выбора сохраняется в $scope.statessource.

Это должно работать:

$scope.GetSelectedCountry = function() { 
    $scope.strCountry = $scope.statessource; 
} 
0

Если единственная забота, чтобы получить выбранное значение каждый раз, когда пользователь изменяет его, ваш ng-model уже обрабатывать этот случай. Таким образом, с помощью этого

<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries"> 

Угловая всегда будет применяться его двухсторонняя-привязки данных для хранения выбранного параметра внутри вашей $scope.statessource -переменную.

Кроме этого, если вы хотите, чтобы делать другие вещи, связанные с изменением выбора, вы можете сделать следующее:

<select id="country" ng-model="statessource" ng-disabled="!type" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry(statessource)"> 

$scope.GetSelectedCountry = function (newState) { 
    // Do something with your newState variable. 
    // Remember, $scope.statessource still includes the currently selected 
    // option 
} 

Я надеюсь, что помог :)

Смежные вопросы