下面這篇文章要跟大家介紹一下Angularjs自訂一個可輸入的下拉框元件的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《angularjs教學》
在angularjs 中自訂一個可輸入的下拉框元件，元件的創建及引入如下。
新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 可由引入页面传入
},
link: function ($scope, $elem) {
//
},
controller: ["$scope", function ($scope) {
}]
}
}]);頁面介紹insertSelect 元件
<insert-select model-data="formData"
option-list="successCodeList"
placeholder="'请选择'">
</insert-select>更多程式相關知識，請造訪：程式設計教學！ ！
以上是Angularjs自訂一個可輸入的下拉框元件（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
