2. 程式人生 > >AngularJS中ng-options實現下拉列表的資料繫結

AngularJS中ng-options實現下拉列表的資料繫結

阿新 • • 發佈：2019-01-10

下拉列表的簡單使用

ng-option指令使用很簡單，只需要繫結兩個屬性：

一個是ng-model用於獲取選定的值；

另一個是ng-options用於確定下拉列表的元素陣列。

<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>

上面這條語句就是把選擇的值與engineer.currentActivity進行雙向資料繫結，然後列表中的選項是activities中的每一個值。資料如下：

複製程式碼
 
$scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };
         
            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];
複製程式碼

執行結果如：

為了美觀一點，這裡引用了bootstrap。

複製程式碼 
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
 
>  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
            {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>
            <select ng-model="engineer.currentActivity" class="form-control"
                    ng-options="act for act in activities">               
            </select>
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                name: "Dani",
                currentActivity: "Fixing bugs"
            };
         
            $scope.activities =
            [
                "Writing code",
                "Testing code",
                "Fixing bugs",
                "Dancing"
            ];
         }]);
    </script>
</body>
</html>
複製程式碼 回到頂部

複雜物件，自定義列表名稱

有的時候下拉列表並不是單純的字串陣列，可能是json物件，例如：

複製程式碼 
$scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
複製程式碼

這個時候，繫結的資料就必須是與這裡面的格式相同的資料，比如直接複製其中一條：

複製程式碼 
$scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };
複製程式碼

當然也可以直接指定成：

$scope.engineer = {currentActivity:activities[3]}

然後在指令中可以迴圈列表拼接處下拉框的名稱

複製程式碼 
<select 
        ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
</select >
複製程式碼

執行效果如：

全部的程式碼如下：

複製程式碼 
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>
複製程式碼 回到頂部

實現下拉列表的分組

其實分組與前面的例子很像，只要把空間中的ng-options的值換成下面：

<select ng-model = "engineer.currentActivity"
        class="form-control"
        ng-options = "a.name group by a.type for a in activities" >               
</select >

新增 group by 就會按照後面的值進行分組

全部程式碼：

複製程式碼 
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div ng-controller="EngineeringController" class="container">
        <div class="col-md-12">
        {{engineer.name}} is currently: {{ engineer.currentActivity}}
        </div>
        <div class="col-md-4">
            <label for="name">Choose a new activity:</label>            
            <!-- <select 
            ng-model = "engineer.currentActivity"
            class="form-control"
            ng-options = "a.name +' (' + a.type + ')' for a in activities" >               
            </select >  -->
            <select ng-model = "engineer.currentActivity"
                    class="form-control"
                    ng-options = "a.name group by a.type for a in activities" >               
            </select > 
        </div>
    </div>
    <script type="text/javascript">
         var myAppModule = angular.module("myApp",[]);
         myAppModule.controller("EngineeringController",["$scope",function($scope){
            $scope.engineer = {
                 name: "Dani" ,
                 currentActivity: {
                     id: 3,
                     type: "Work" ,
                     name: "Fixing bugs"
                 }
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
         }]);
    </script>
</body>
</html>
複製程式碼 回到頂部

按照id進行標識

由於之前的ng-model相當於初始的時候給設定了一個值。當你選擇一個下拉列表選項的時候，就會覆蓋掉這個初始值。

所以更多的時候會使用一個id進行標識，這樣在初始化賦值的時候，只需要設定一個id就可以了。

複製程式碼 
$scope.engineer = {
                 currentActivityId: 3
             };
         
             $scope.activities =
             [
                 { id: 1, type: "Work" , name: "Writing code" },
                 { id: 2, type: "Work" , name: "Testing code" },
                 { id: 3, type: "Work" , name: "Fixing bugs" },
                 { id: 4, type: "Play" , name: "Dancing" }
             ];
複製程式碼

指令可以寫成下面的格式

複製程式碼 
<select 
       ng-model = "engineer.currentActivityId"
       class="form-control"
       ng-options = "a.id as a.name group by a.type for a in activities" >               
</
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
AngularJS中ng-options實現下拉列表的資料繫結

     
 
                

下拉列表的簡單使用

ng-option指令使用很簡單，只需要繫結兩個屬性：

一個是ng-model用於獲取選定的值；

另一個是ng-options用於確定下拉列表的元素陣列。

<select ng-model="engineer.currentActivit 



  
 

    


    
    
Angularjs 關於Angularjs的ng-options設定下拉框的value的值

     
  
 
 <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedName" ng-options="item.id as item.name for item in names">
//ite 



  
 

    


    
    
Repeater中的下拉列表DropDownList繫結資料來源

     
 
                
        protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListI 



  
 

    


    
    
Easyui   下拉列表動態繫結資料  C#

     
 
                                      前端程式碼： <input id="ipt_typeName" name="ipt_typeName"/>                    js：        $('#ipt_typeName').combobo 



  
 

    


    
    
UltraGrid中實現下拉列表列

     
  Grid中經常用到下拉列表項，如何快捷的實現下拉列表項呢？ 
1． 拖放一個Grid到Form上，新增Columns，並設定Sex欄位為下拉列表樣式

2． Grid的下拉列表框中的值是ValueListItem型別，所以，需要在Form初始化的時候設定Grid用到的ValueList
如下私有函式 



  
 

    


    
    
jquery+css實現下拉列表

     
 aps   otto   ddc   ()   splay   app   lec   and   cti   <!DOCTYPE html><html><head><meta charset="UTF-8"><title>fruit</tit 



  
 

    


    
    
文本框實現下拉列表聯動

     
 function   on()   ole   -1   nbsp   val   edit   end   col   　　昨天做了一個文本框過濾下拉列表選項的東西，技術不復雜，記錄下來一遍提高再使用效率。
　　

 $(‘#searchOption‘).keyup(function(){
         



  
 

    


    
    
分別在javascript和JSP中動態設置下拉列表默認值

     
 技術   bsp   分享   列表   tex   align   scrip   jsp頁面   sin    
一.JavaScript中動態設置select標簽中<option>選項的默認值：
 比如，要完成下邊這個下拉列表的動態顯示，並且當進行前後翻頁時，下拉列表中的值自動更新為當前頁碼 



  
 

    


    
    
h5,用css實現下拉列表

     
 gin   clas   isp   pla   mar   ack   實現   寬高   doc   <!DOCTYPE html><html><head><meta charset="utf-8"><style>	ul li{		list-st 



  
 

    


    
    
25.用js和jquery實現下拉列表的左右選擇

     
 select2   hit   color   nts   -type   utf   ctype   block   標簽   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x 



  
 

    


    
    
vue實現下拉列表

     
  
 
  <el-select v-model="form.fzr" placeholder="負責任">
           <el-option v-for="(item,index) in fzr1" :key="index" :label="item.label" :value= 



  
 

    


    
    
vue實現下拉列表多選全選以及模糊查詢的vue元件

     
 
							
							
							前端，有時有這樣的需求，需要一個下拉列表，還要有多選全選功能，以及模糊查詢功能的vue元件，我做了一個簡陋的元件，供大家參考，有問題請留言
這是我的檔案目錄結構

**
效果圖：

o(∩_∩)o  o(∩_∩)o  o(∩_∩)o  o(∩_∩)o  o(∩_ 



  
 

    


    
    
使用JavaScript實現下拉列表的聯動

     
 
                在設計使用者註冊頁面時經常有籍貫等資訊要填寫，填寫這些資訊一般都是先選擇國家->省->市->鎮。

此篇主要講述，當第一個下拉列表中的內容選定之後第二個下拉列表中的內容也隨之改變（例如：當你第一個下拉列表選擇江西時，第二個下拉列表會顯示南昌贛州等城市；當你第 



  
 

    


    
    
HTML用DIV/CSS實現下拉列表

     
 
                HTML程式碼：

<body>
		
		<div class="title" >
		<h1>SYROS</h1>
		
		<ul>
			<li><a href="">HOME< 



  
 

    


    
    
使用freemarker實現下拉列表

     
 
                只對下拉列表項進行構建，到底為什麼不進行整體構建,只不過是某些js庫定位元素的原因。

資料庫建表語句：


--下拉列表T_LIST_ITEM
CREATE TABLE IF NOT EXISTS  T_LIST_ITEM(
LI_ID    INTEGER NOT NUL 



  
 

    


    
    
js 實現下拉列表

     
  
 
  
  
 一、HTML 
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="hw5">
		<m 



  
 

    


    
    
在微信小程式中，如何實現下拉重新整理（模擬重新整理）

     
 
                

一、在app.json中啟動重新整理，



在Windows 中，

       新增  "enablePullDownRefresh":"true"

二、在需要重新整理的頁面中寫（若是單個頁面），反之，可寫入app.js中：




onPullDownRefre 



  
 

    


    
    
easyUI在可編輯的datagrid中加入combogrid 實現下拉選擇填充列

     
 
                
在公司的專案中，有需要再新增資料的時候，通過下來選擇資料來完成資料的填充。
網上找了很多關於datagrid繫結 combogrid的方法，都不能很好的解決問題，於是自己根據easyUI的api完成了這個方法。


ID為OtherFees的table 是一個datagri 



  
 

    


    
    
delphi  button 實現下拉列表

     
 
unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, Menus, StdCtrls;

type
  TF 



  
 

    


    
    
CSS中嵌入指令碼+DIV下拉列表

     
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>Pconcool's Blog</title><style>.