AngularJS学习之旅—AngularJS Select(十)-白红宇

AngularJS学习之旅—AngularJS Select(十)

阅读量：5018 次

发布时间：2019-06-12

本文共 1586 字，大约阅读时间需要 5 分钟。

1、AngularJS Select(选择框)

　　AngularJS 可以使用数组或对象创建一个下拉列表选项。

　　　　ng-option：创建一个下拉列表，列表项通过对象和数组循环输出

　　　　　　eg：

　　ng-repeat：通过数组来循环 HTML 代码来创建下拉列表

　　　　eg：

2、ng-option比ng-repeat更适合创建下拉列表的优势

　　使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

　　实例1

$scope.sites = [    {site : "Google", url : "http://www.google.com"},    {site : "baidu", url : "http://www.baidu.com"},    {site : "Taobao", url : "http://www.taobao.com"}];

你选择的是: {
   {selectedSite}}

你选择的是: {
   {selectedSite.site}}
网址为: {
   {selectedSite.url}}

　　实例2

$scope.sites = {    site01 : "Google",    site02 : "Runoob",    site03 : "Taobao"};

你选择的值是: {
   {selectedSite}}

$scope.cars = {car01 : {brand : "Ford", model : "Mustang", color : "red"},car02 : {brand : "Fiat", model : "500", color : "white"},car03 : {brand : "Volvo", model : "XC90", color : "black"}};

3、代码

    
             
             
              
                  
       使用 ng-options 创建选择框
            
                   
                   
       你选择的是: {
   {selectSite.site}}
            
       网址为: {
   {selectSite.url}}
            
                   
       你选择的是: {
   {selectedCar.brand}}
            
       模型: {
   {selectedCar.model}}
            
       颜色: {
   {selectedCar.color}}
        
      
        
      
         
              
                  
       使用 ng-repeat 创建选择框
            
                   
                   
       你选择的是: {
   {selectedSite}}