AngularJS系列(五)——下拉框

<div ng-app="myApp"ng-controller="myCtrl">
<select ng-init="selectedName =names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
         <p>选择的公司是{{selectedName}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.names = ["baidu", "alibaba","tencent"];
});
</script>
<p>该实例演示了 ng-options 指令的使用。</p>

<div ng-app="myApp"ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-init="selectSite =sites[0]" ng-model="selectSite" ng-options="x.site for x insites">
</select>
<h1>你选择的是:{{selectSite.site}}</h1>
<p>网址为:{{selectSite.url}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.sites = [
             {site : "Google", url :"http://www.google.com"},
             {site : "Runoob", url :"http://www.runoob.com"},
             {site : "Taobao", url :"http://www.taobao.com"}
         ];
});
</script>
<p>该实例演示了使用ng-options  指令来创建下拉列表，选中的值是一个对象。</p>

<div ng-app="myApp"ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-init="selectCar =cars['car01']" ng-model="selectCar" ng-options="x for (x,y) in cars">
</select>
<h1>你选择的是:{{selectCar.brand}}</h1>
<h2>模型:{{selectCar.model}}</h2>
<h3>颜色:{{selectCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.cars = {
       car01 : {brand : "Ford", model : "Mustang", color :"red"},
       car02 : {brand : "Fiat", model : "500", color :"white"},
       car03 : {brand : "Volvo", model : "XC90", color :"black"}
    }
});
</script>