背景:希望有个下拉多选框,显示一个店铺的属性,其属性值类似于,如下表示: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>-->
分享到:
相关推荐
在本文中,我们将深入探讨如何在AngularJS应用中集成并使用ui-select2库来实现多选下拉功能。AngularJS是一款强大的前端JavaScript框架,而select2是一个流行的jQuery插件,它提供了美观且功能丰富的选择器组件,...
angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等
《AngularJS多选下拉框指令实践:alexandernst-angular-multi-select》 在前端开发领域,用户界面的交互设计是提升用户体验的关键因素之一。在众多的交互元素中,下拉选择框是一种常见且实用的设计,它允许用户从多...
6. **集成下拉功能**:为了实现下拉效果,你可以使用AngularJS UI Bootstrap的`<select>`指令,或者自定义一个下拉框,将树的数据绑定到下拉框中。当用户选择一个节点时,将其值设置为所选节点的标识符,并更新UI以...
ui-select附加组件此ui-select插件用作名称表示ui-select插件提供了一个select下拉接口。 。安装该编辑器是Bootstrap装饰器的附加组件。 要使用它,只需包含bootstrape-ui-select.min.js 。 最简单的方法是使用bower...
在上面的代码中,`el-select`是Element UI的下拉框组件,`v-model`用来绑定选定的值,`multiple`属性表示这是一个多选的下拉框。`el-option`是下拉框中的每个选项,通过`v-for`循环遍历`options`数据,`label`和`...
此外,为了让多选下拉框更友好,我们可以添加一些额外的UI元素,如全选/全不选按钮,或者提供搜索功能,帮助用户快速找到想要选择的项。这通常需要结合CSS和JavaScript来实现。 标签中提到了“Html”,这意味着我们...
在前端开发中,下拉框(Select)是用户界面中常见的一种交互元素,用于提供一组可选项供用户选择。在本场景中,我们讨论的是一个具有特定增强功能的下拉框,它支持多选、分组以及搜索功能。这样的组件在处理大量数据...
在网页开发中,`select`下拉框是常见的交互元素,用于用户在预设的选项中选择一项。然而,当选项过多时,如上千条,传统的`select`下拉框会变得难以操作。为了解决这个问题,我们可以引入“模糊查询”功能,即用户在...
### AngularJS 最常用的八种功能详解 #### 一、迭代输出之 ng-repeat 标签 **功能概述**:`ng-repeat` 是 AngularJS 中非常强大的一个指令,它允许你遍历数组或对象,并且能够在视图层动态地展示出数组或对象中的...
7. **插件与库**:有许多现成的JavaScript库和组件,如Select2、Chosen、Bootstrap Select等,它们提供了预封装的多选下拉框解决方案,包括样式和交互效果,可以快速集成到项目中。 8. **性能优化**:如果下拉框...
默认情况下,`<select>` 只允许用户选择一个选项,但通过添加`multiple`属性,我们可以创建一个可多选的下拉框。例如: ```html <select multiple> <option value="option1">Option 1 <option value="option2">...
5. **CSS Styling**: 为了实现美观的UI,需要使用CSS或Sass来定制组件样式,使其符合应用的设计规范。 6. **Data Binding**: Angular的双向数据绑定使得组件能够实时反映模型的变化,反之亦然。 7. **Ionic 2 ...
- **React/Vue/Angular等框架组件**:在现代前端框架中,有许多现成的UI库(如React-Select、Vuetify、Angular Material等)提供了这样的组件,可以直接使用,它们通常具有更好的可定制性和性能优化。 2. **使用...
本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。 写了个搜索...
例如,React可以使用Material-UI库中的Select组件,Vue可以利用Element UI或Vuetify,而Angular则有ng-bootstrap或Angular Material等库。 实现这个功能的关键步骤包括: 1. **数据准备**:定义好嵌套的数据结构,...
使用方法上,要实现自定义的下拉框,我们首先需要引入Bootstrap的CSS和JS文件,以及AngularJS的相关文件,并且还要引入我们自定义的easy-select.js库文件和style.css样式表。随后,在Angular控制器中声明对...
在IT行业中,尤其是在前端开发领域,下拉框(Select)是一种常见的用户界面元素,用于提供一组预设选项供用户选择。然而,随着用户体验需求的提升,传统的静态下拉框已经不能满足所有场景,因此出现了“下拉框可输入...
对于年月日选择,我们可以创建一个下拉框(`<select>`)列表,每个选项代表一年、一月或一日。使用`ngOptions`指令动态生成这些选项: ```html <select ng-model="date.year" ng-options="year for year in years">...
标题中的“可以输入的下拉框(可用于项目的)”是指一种交互式UI组件,它结合了传统下拉框和文本输入框的功能,用户既可以从中选择已有的选项,也可以自行输入新的内容。这种设计在许多Web应用和软件项目中非常常见,...