相關推薦:《》
在 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自定義一個可輸入的下拉框元件(程式碼範例)的詳細內容,更多請關注TW511.COM其它相關文章!