本文摘自PHP中文网,作者青灯夜游,侵删。
下面本篇文章给大家介绍一下Angularjs自定义一个可输入的下拉框组件的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
相关推荐:《angularjs教程》
在 angularjs 中自定义一个可输入的下拉框组件,组件的创建及引入如下。
新建 insertSelect.html 文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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 自定义指令
阅读剩余部分
相关阅读 >>
eclipse中如何配置angularjs插件的方法
angularjs“路由”的简介及用法介绍
angularjs数据绑定失效的解决方法
11 个对web开发者非常有用的angularjs工具
bootstrap与angularjs区别
angularjs和vue.js有什么差异?简单对比
谈谈angularjs中providers之间的差异
angular2 ngmodel模块的详细介绍
angular和angularjs间有什么关系
angularjs的ng-bind-html指令详解
更多相关阅读请进入《angularjs》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Angularjs自定义一个可输入的下拉框组件(代码示例)