Angularjs自定义一个可输入的下拉框组件（代码示例）-js教程-PHP中文网

Angularjs自定义一个可输入的下拉框组件（代码示例）

青灯夜游

发布： 2020-12-24 17:50:09

转载

2904人浏览过

下面本篇文章给大家介绍一下angularjs自定义一个可输入的下拉框组件的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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中文网其它相关文章！