AngularJS系列(五)——下拉框

清疚 2022-06-07 23:42 185阅读 0赞

AngularJS 可以使用数组或对象创建一个下拉列表选项，ng-option 指令来创建一个下拉列表，ng-init设置默认选中值

### 通过数组赋值 ###

<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>