How to Cascade the country list passed through angular controller to view part

Question

[
  {"name":"Afghanistan"},
  {"name":"Albania"},
  {"name":"Algeria"},
  {"name":"American Samoa"},
  {"name":"Andorra"},
  {"name":"Angola"},
  {"name":"Anguilla"},
  {"name":"Antarctica"},
  {"name":"Antigua And Barbuda"},
  {"name":"Argentina"},
  {"name":"Armenia"},
  {"name":"Aruba"},
  {"name":"Australia"},
  {"name":"Austria"},
  {"name":"Azerbaijan"},
  {"name":"Bahamas The"}
]

<select id="country" ng-model="formOneData.country" ng-options="country in country">
 <option value="" disabled>--Select your Country--</option>
 </select>
{{country.countries}}

While displaying the countries in html is get the below JSON content of countries, i need to list it in the select field. So is there any alternatives .

score 2 · Answer 1 · answered May 31 '16 at 06:43

2

$scope is the 'glue' between controller and view.

$scope.countries = [
{"name":"Afghanistan"},
{"name":"Albania"},
{"name":"Algeria"},
{"name":"American Samoa"},
{"name":"Andorra"},
{"name":"Angola"},
{"name":"Anguilla"},
{"name":"Antarctica"},
{"name":"Antigua And Barbuda"},
{"name":"Argentina"},
{"name":"Armenia"},
{"name":"Aruba"},
{"name":"Australia"},
{"name":"Austria"},
{"name":"Azerbaijan"},
{"name":"Bahamas The"}
 ]

And HTML

<select id="country" ng-model="formOneData.country" ng-options="country in countries"></select>

answered May 31 '16 at 06:43

ThiagoPXP

5,362
3
31
44

thanks for you patience in answering but not working bro, i need to cascade each names from the countries via select field – Vishnu S Babu May 31 '16 at 06:55
This is other issue in your code. Answer here- http://stackoverflow.com/questions/18647098/initializing-select-with-angularjs-and-ng-repeat – ThiagoPXP Jun 01 '16 at 11:40

score 2 · Accepted Answer · answered May 31 '16 at 06:56

Is this what you are trying to achieve?

function TodoCtrl($scope) {
  $scope.choice = null;
  $scope.countries = [
    {"name":"Afghanistan"},
    {"name":"Albania"},
    {"name":"Algeria"},
    {"name":"American Samoa"},
    {"name":"Andorra"},
    {"name":"Angola"},
    {"name":"Anguilla"},
    {"name":"Antarctica"},
    {"name":"Antigua And Barbuda"},
    {"name":"Argentina"},
    {"name":"Armenia"},
    {"name":"Aruba"},
    {"name":"Australia"},
    {"name":"Austria"},
    {"name":"Azerbaijan"},
    {"name":"Bahamas The"}
  ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <select id="country" ng-model="choice" ng-options="country.name as country.name for country in countries">
      <option value="" disabled>--Select your Country--</option>
    </select>
    {{choice}}
  </div>
</div>

How to Cascade the country list passed through angular controller to view part

2 Answers2