`
v7sky
  • 浏览: 76523 次
文章分类
社区版块
存档分类
最新评论

【AngularJS系列】基于angular-ui-select定制下拉框多选

阅读更多
背景:希望有个下拉多选框,显示一个店铺的属性,其属性值类似于,如下表示:0001(十进制为1)表示店铺属性1,0010表示店铺属性2,以此类推。若某店铺属性为0011(十进制表示为3),则其同时具有属性1和属性2

直接上代码

一、index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>webapp</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">

</head>
<body>

<div ng-controller ="appCtrl">

    <shop-flag-select ng-model="flag"></shop-flag-select>
    <pre>
        {{flag}}
    </pre>

</div>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

<script src="bower_components/angular-ui-select/dist/select.js"></script>
<link href="bower_components/angular-ui-select/dist/select.css" rel="stylesheet">

<script src="comp/shopFlagSelect.js"></script>
<script>

    angular.module('app', ['ui.select', 'ngSanitize','shopflagselect'])

            .controller('appCtrl',function ($scope) {
                $scope.flag = '3';
            });
</script>
</body>
</html>


说明:使用bower依次安装 bootstrap、angularjs、angularjs-ui-select、angular-sanitize

二、自定义组件

var module = angular.module('shopflagselect', []);

module.directive('shopFlagSelect',function () {
    return{
        restrict : 'E',
        templateUrl : 'comp/shopFlagSelect.html',
        scope:{
            flagValue : '=ngModel'
        },
        link:function (scope,element,attrs) {
            scope.itemArray =[
                {id: 1, name: '担保交易'},
                {id: 10, name: '货到付款'},
            ];

            scope.selected = {
                value:[ ]
            };

           // 转换flag属性到下拉框的选项
            attrs.$observe('ngModel', function (value) {
                var target = scope.flagValue;

                $.each(scope.itemArray, function (index, result) {
                    //将下拉选项的id字符串转换为2进制数
                    var itemValue =  parseInt(result.id,2);
                    if( target & itemValue){
                        scope.selected.value.push(result);
                    }
                });
            });
            //下拉多选时,及时计算flag属性
            scope.$watch('selected',function(newValue,oldValue) {
                var flag = 0;
                $.each(scope.selected.value, function (index, result) {
                    flag = flag + parseInt(result.id, 2);
                });

                scope.flagValue = flag;

            },true);
        }
    }
});


三、模板
<ui-select multiple ng-model="selected.value">
    <ui-select-match placeholder="Select person...">
        {{$item.name}}
    </ui-select-match>
    <ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>
<!--<pre>-->
    <!--{{selected.value}}-->
<!--</pre>-->

0
1
分享到:
评论

相关推荐

    angularjs ui-select2 多选下拉所需资源文件

    在本文中,我们将深入探讨如何在AngularJS应用中集成并使用ui-select2库来实现多选下拉功能。AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,...

    angularjs select2 多选下拉框

    angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等

    前端项目-alexandernst-angular-multi-select.zip

    《AngularJS多选下拉框指令实践:alexandernst-angular-multi-select》 在前端开发领域,用户界面的交互设计是提升用户体验的关键因素之一。在众多的交互元素中,下拉选择框是一种常见且实用的设计,它允许用户从多...

    angularjs下拉树控件

    6. **集成下拉功能**:为了实现下拉效果,你可以使用AngularJS UI Bootstrap的`&lt;select&gt;`指令,或者自定义一个下拉框,将树的数据绑定到下拉框中。当用户选择一个节点时,将其值设置为所选节点的标识符,并更新UI以...

    angular-schema-form-ui-select:用于旧版构建的不建议使用的回购叉

    ui-select附加组件此ui-select插件用作名称表示ui-select插件提供了一个select下拉接口。 。安装该编辑器是Bootstrap装饰器的附加组件。 要使用它,只需包含bootstrape-ui-select.min.js 。 最简单的方法是使用bower...

    vue+elementui实现下拉框增加checkbox并可全选或取消(完整案例及效果图).zip

    在上面的代码中,`el-select`是Element UI的下拉框组件,`v-model`用来绑定选定的值,`multiple`属性表示这是一个多选的下拉框。`el-option`是下拉框中的每个选项,通过`v-for`循环遍历`options`数据,`label`和`...

    一款好用的多选下拉框

    此外,为了让多选下拉框更友好,我们可以添加一些额外的UI元素,如全选/全不选按钮,或者提供搜索功能,帮助用户快速找到想要选择的项。这通常需要结合CSS和JavaScript来实现。 标签中提到了“Html”,这意味着我们...

    下拉框(select),可以多选,带有分组搜索功能

    在前端开发中,下拉框(Select)是用户界面中常见的一种交互元素,用于提供一组可选项供用户选择。在本场景中,我们讨论的是一个具有特定增强功能的下拉框,它支持多选、分组以及搜索功能。这样的组件在处理大量数据...

    select下拉模糊查询插件

    在网页开发中,`select`下拉框是常见的交互元素,用于用户在预设的选项中选择一项。然而,当选项过多时,如上千条,传统的`select`下拉框会变得难以操作。为了解决这个问题,我们可以引入“模糊查询”功能,即用户在...

    AngularJS 最常用的八种功能

    ### AngularJS 最常用的八种功能详解 #### 一、迭代输出之 ng-repeat 标签 **功能概述**:`ng-repeat` 是 AngularJS 中非常强大的一个指令,它允许你遍历数组或对象,并且能够在视图层动态地展示出数组或对象中的...

    可多选的下拉框

    7. **插件与库**:有许多现成的JavaScript库和组件,如Select2、Chosen、Bootstrap Select等,它们提供了预封装的多选下拉框解决方案,包括样式和交互效果,可以快速集成到项目中。 8. **性能优化**:如果下拉框...

    多选下拉框

    默认情况下,`&lt;select&gt;` 只允许用户选择一个选项,但通过添加`multiple`属性,我们可以创建一个可多选的下拉框。例如: ```html &lt;select multiple&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;...

    一个可筛选的下拉选择ionic2组件ionic2filterselect

    5. **CSS Styling**: 为了实现美观的UI,需要使用CSS或Sass来定制组件样式,使其符合应用的设计规范。 6. **Data Binding**: Angular的双向数据绑定使得组件能够实时反映模型的变化,反之亦然。 7. **Ionic 2 ...

    带checkbox的下拉框

    - **React/Vue/Angular等框架组件**:在现代前端框架中,有许多现成的UI库(如React-Select、Vuetify、Angular Material等)提供了这样的组件,可以直接使用,它们通常具有更好的可定制性和性能优化。 2. **使用...

    Angular实现下拉框模糊查询功能示例

    本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。 写了个搜索...

    表格嵌套下拉框

    例如,React可以使用Material-UI库中的Select组件,Vue可以利用Element UI或Vuetify,而Angular则有ng-bootstrap或Angular Material等库。 实现这个功能的关键步骤包括: 1. **数据准备**:定义好嵌套的数据结构,...

    自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    使用方法上,要实现自定义的下拉框,我们首先需要引入Bootstrap的CSS和JS文件,以及AngularJS的相关文件,并且还要引入我们自定义的easy-select.js库文件和style.css样式表。随后,在Angular控制器中声明对...

    下拉框可输入模糊查询,自动匹配

    在IT行业中,尤其是在前端开发领域,下拉框(Select)是一种常见的用户界面元素,用于提供一组预设选项供用户选择。然而,随着用户体验需求的提升,传统的静态下拉框已经不能满足所有场景,因此出现了“下拉框可输入...

    基于angular.js日期选择器.zip

    对于年月日选择,我们可以创建一个下拉框(`&lt;select&gt;`)列表,每个选项代表一年、一月或一日。使用`ngOptions`指令动态生成这些选项: ```html &lt;select ng-model="date.year" ng-options="year for year in years"&gt;...

    可以输入的下拉框(可用于项目的)

    标题中的“可以输入的下拉框(可用于项目的)”是指一种交互式UI组件,它结合了传统下拉框和文本输入框的功能,用户既可以从中选择已有的选项,也可以自行输入新的内容。这种设计在许多Web应用和软件项目中非常常见,...

Global site tag (gtag.js) - Google Analytics