小編給大家分享一下Angularjs如何自定義一個(gè)可輸入的下拉框組件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

網(wǎng)站設(shè)計(jì)制作過程拒絕使用模板建站；使用PHP+MYSQL原生開發(fā)可交付網(wǎng)站源代碼;符合網(wǎng)站優(yōu)化排名的后臺(tái)管理系統(tǒng)；網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)收費(fèi)合理；免費(fèi)進(jìn)行網(wǎng)站備案等企業(yè)網(wǎng)站建設(shè)一條龍服務(wù).我們是一家持續(xù)穩(wěn)定運(yùn)營(yíng)了十載的創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司。

在 angularjs 中自定義一個(gè)可輸入的下拉框組件，組件的創(chuàng)建及引入如下。

新建 insertSelect.html 文件

<style type="text/css">
    .insert-select {
        position: relative;
    }
 
    .input-box {
        position: absolute;
        height: calc(100% - 4px);
        width: calc(100% - 25px);
        top: 2px;
        left: 2px;
        padding-left: 10px;
        outline: none !important;
        border-radius: 4px !important;
        border: none !important;
    }
 
</style>
 
<!--可輸入下拉框-->
<div class="insert-select">
    <select ng-attr-placeholder="{{placeholder}}" class="form-control"
            chosen ng-model="modelData"
            ng-options="item for item in optionList">
        <option value=""></option>
    </select>
 
    <input type="text" class="input-box"
           ng-attr-placeholder="{{placeholder}}"
           ng-model="modelData">
</div>

directive 自定義指令

//可輸入select框
angular.module("controllers")
.directive("insertSelect", [function () {
    return {
        restrict: 'AE',
        templateUrl: 'template/common/insertSelect.html',
        scope: {
            modelData: '=modelData',        
            optionList: '=optionList',     
            placeholder: '=placeholder',    //placeholder 可由引入頁(yè)面?zhèn)魅?        },
        link: function ($scope, $elem) {
            //
        },
        controller: ["$scope", function ($scope) {
 
        }]
    }
}]);

頁(yè)面引入 insertSelect 組件

<insert-select model-data="formData"
               option-list="successCodeList"
               placeholder="'請(qǐng)選擇'">
</insert-select>

看完了這篇文章，相信你對(duì)“Angularjs如何自定義一個(gè)可輸入的下拉框組件”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站題目：Angularjs如何自定義一個(gè)可輸入的下拉框組件-創(chuàng)新互聯(lián)
瀏覽地址：http://jinyejixie.com/article38/isgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、域名注冊(cè)、App開發(fā)、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)