Angularjs如何自定义一个可输入的下拉框组件-创新互联-成都快上网建站

Angularjs如何自定义一个可输入的下拉框组件-创新互联

小编给大家分享一下Angularjs如何自定义一个可输入的下拉框组件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

网站设计制作过程拒绝使用模板建站;使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统;网站建设、成都网站设计收费合理;免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十载的创新互联网站建设公司。

在 angularjs 中自定义一个可输入的下拉框组件,组件的创建及引入如下。

新建 insertSelect.html 文件


    .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;
    }
 

 


    
        
    
 
    

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 组件


看完了这篇文章,相信你对“Angularjs如何自定义一个可输入的下拉框组件”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻名称:Angularjs如何自定义一个可输入的下拉框组件-创新互联
分享地址:http://kswjz.com/article/isgpp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流