1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    6. </head>
    7. <body>
    9. <div ng-app="myApp" ng-controller="myCtrl">
    11. <p>选择网站:</p>
    12. <input type="checkbox" ng-model="myVar1" name="name" ng-change=checkBoxfn()>苹果
    13. <input type="checkbox" ng-model="myVar2" name="name" ng-change=checkBoxfn()>梨
    14. <input type="radio" ng-model="myVar" value="dogs1">Dogs
    15. <input type="radio" ng-model="myVar" value="dogs">Dogs
    16. <select ng-model="selectedSite" ng-options="x.url for x in sites" ng-change=fn()>
    17.     <option disabled value="">请选择数据源类型</option>
    18. </select>
    20. <h1>你选择的是: {{selectedSite.site}}</h1>
    21. <p>网址为: {{selectedSite.url}}</p>
    23. </div>
    25. <script>
    26. var app = angular.module('myApp', []);
    27. app.controller('myCtrl', function($scope) {
    28.    $scope.sites = [
    29.         {site : "Google", url : "http://www.google.com"},
    30.         {site : "Runoob", url : "http://www.runoob.com"},
    31.         {site : "Taobao", url : "http://www.taobao.com"}
    32.     ];
    33.     $scope.fn=function(){
    34.         console.log(this)
    35.     }
    36. });
    37. </script>
    39. <p>该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。</p>
    40. </body>
    41. </html>