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


本文摘自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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...