angularJS 可編輯下拉選項框

最後更新：2017-08-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：介紹 model set rip play max 中文 inpu 20px

功能介紹：

　　該組件將文字框和下拉框的組合，當你點擊最右邊的下拉按鈕,實現下拉框選擇的功能；當你選中文字框，實現文字框輸入的功能。將文字框和下拉框設定name屬性一樣他自動會把對應下拉框的值傳入後台，而文字框的值不傳，當你做文字框使用，它會把文字框的值傳入後台而下拉框的值不傳。

可編輯下拉選項框

ANY1

1.html代碼

 1 <!DOCTYPE html> 2 <html ng-app="myapp"> 3     <head> 4         <meta charset="UTF-8"> 5         <title>可編輯下拉選項框</title> 6         <script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script> 7         <script src="../js/edit_sel.js" type="text/javascript" charset="utf-8"></script> 8         <link rel="stylesheet" type="text/css" href="edit_sel.css"/> 9     </head>10     11     <body ng-controller="mycon">12         <select class="sel" name="search" ng-focus="foChange(flt1)" ng-model="flt1" ng-change="ftl1Change(flt1)" ng-focus="foc">13             <option  value=""></option>14             <option  value="ANY">ANY</option>15             <option  value="1" style="display: none;">1</option>16         </select>*17         <input class="inp" maxlength="4" type="text" required="required" 18             ng-blur="chkNumber(fltNo1)" ng-model="fltNo1" ng-change="fltNo1Change(fltNo1)" />19             <font color="red">&nbsp;*</font>20             <span ng-model="tips">&nbsp;{{tips}}</span>21     </body>22 </html>

2.css樣式引入

 1 .sel{ 2     width: 1.5%; 3     position: relative; 4     left: 11.5%; 5     height:21px; 6 } 7  8 .inp{ 9     width: 10%;10     position: relative;11     left: -20px;12 }

3.可編輯文字框下拉選項的js代碼實現

angular.module("myapp",[]).controller("mycon",function($scope){    var vm = $scope;    // 下拉框change事件    $scope.ftl1Change= function(flt1){//        console.log(flt1);        if(vm.flt1===""||vm.flt1==null){            vm.fltNo1="";        }else{            vm.fltNo1="ANY";        }            };        // 文字框輸入 change事件    $scope.fltNo1Change = function(fltNo1){        vm.flt1 = fltNo1;    };        // 下拉框focus事件    vm.foChange = function(flt1){        vm.flt1 = "1";    };        // 校正是是否輸入資料合法    $scope.chkNumber=function(eleText){         var value =eleText;              for(var i=0;i<value.length;i++)                {                     if(value.charAt(i)>"9"|| value.charAt(i)<"0")                     {                            vm.tips="輸入非法字元！";                            eleText.focus();                            break;                     }              }    };});/*// html 原生的onblur事件校正   <input type="text" id="d1" onblur=" chkNumber(this)"/>      function chkNumber(eleText)        {              var value =eleText.value;              var len =value.length;              for(var i=0;i<len;i++)               {                     if(value.charAt(i)>"9"|| value.charAt(i)<"0")                     {                            alert("含有非數字字元");                            eleText.focus();                            break;                     }              }       }       */

angularJS 可編輯下拉選項框

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More