Vishnu S Babu Vishnu S Babu - 6 months ago 24
AngularJS Question

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



[
{"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 .

Answer

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>