Created
October 25, 2017 04:44
-
-
Save rayterrill/0b720f674e87d6692b21d16c9e8bd94a to your computer and use it in GitHub Desktop.
More Complicated AngularJS Dropdown JSON Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| </head> | |
| <body> | |
| <div ng-app="myApp" ng-controller="myCtrl"> | |
| <label for="name">Select a State:</label> | |
| <select id="name" ng-model="selectedName" ng-options="state as state.Name for state in states"></select> | |
| <br /> | |
| <label for="region">Select a City:</label> | |
| <select id="region" ng-model="selectedCity" ng-options="item.Name for item in selectedName.Cities"></select> | |
| <br /><br /> | |
| <p>{{selectedName.Name}}</p> | |
| <p>{{selectedName.Population}}</p> | |
| <p>{{selectedCity.Name}}</p> | |
| <p>{{selectedCity.Population}}</p> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> | |
| <script type="text/javascript"> | |
| var app = angular.module('myApp', []); | |
| app.controller('myCtrl', function($scope) { | |
| $scope.states = [ | |
| { | |
| 'Name': 'Oregon', | |
| 'Population': 4093465, | |
| 'Cities': [ | |
| { | |
| 'Name': 'Portland', | |
| 'Population': 639863 | |
| }, | |
| { | |
| 'Name': 'Salem', | |
| 'Population': 167419 | |
| } | |
| ] | |
| }, | |
| { | |
| 'Name': 'Washington', | |
| 'Population': 7288000, | |
| 'Cities': [ | |
| { | |
| 'Name': 'The Little Fishing Village', | |
| 'Population': 704352 | |
| }, | |
| { | |
| 'Name': 'Vancouver', | |
| 'Population': 174826 | |
| } | |
| ] | |
| }, | |
| ] | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment