<!DOCTYPE html> <html> <head> <title> AngularJS ng-options Examples</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <b>Select one car : </b> <select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select> <h4>(or)</h4> <b>Select one car : </b> <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"> </select> <h2>Your selected : {{selectedCar.brand}}</h2> <h3>Model : {{selectedCar.model}}</h3> <h4>Color : {{selectedCar.color}}</h4> </div> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.cars = { Car_01 : {brand : "Audi", model : "S5", color : "White"}, Car_02 : {brand : "BMW", model : "7-series", color : "Black"}, Car_03 : {brand : "Ferrari", model : "California T", color : "Red"}, Car_04 : {brand : "Mercedes-Benz", model : "S-class", color : "Gray"} } }); </script> </body> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Output :
Topic :
AngularJS ng-options
