背景：希望有个下拉多选框，显示一个店铺的属性，其属性值类似于，如下表示：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多选下拉框指令实践：alexandernst-angular-multi-select》 在前端开发领域，用户界面的交互设计是提升用户体验的关键因素之一。在众多的交互元素中，下拉选择框是一种常见且实用的设计，它允许用户从多...
6. **集成下拉功能**：为了实现下拉效果，你可以使用AngularJS UI Bootstrap的`<select>`指令，或者自定义一个下拉框，将树的数据绑定到下拉框中。当用户选择一个节点时，将其值设置为所选节点的标识符，并更新UI以...
ui-select附加组件此ui-select插件用作名称表示ui-select插件提供了一个select下拉接口。 。安装该编辑器是Bootstrap装饰器的附加组件。 要使用它，只需包含bootstrape-ui-select.min.js 。 最简单的方法是使用bower...
- **React/Vue/Angular等框架组件**：在现代前端框架中，有许多现成的UI库（如React-Select、Vuetify、Angular Material等）提供了这样的组件，可以直接使用，它们通常具有更好的可定制性和性能优化。 2. **使用...
在上面的代码中，`el-select`是Element UI的下拉框组件，`v-model`用来绑定选定的值，`multiple`属性表示这是一个多选的下拉框。`el-option`是下拉框中的每个选项，通过`v-for`循环遍历`options`数据，`label`和`...
此外，为了让多选下拉框更友好，我们可以添加一些额外的UI元素，如全选/全不选按钮，或者提供搜索功能，帮助用户快速找到想要选择的项。这通常需要结合CSS和JavaScript来实现。 标签中提到了“Html”，这意味着我们...
在前端开发中，下拉框（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 ...
在网页开发中，`select`下拉框是常见的交互元素，用于用户在预设的选项中选择一项。然而，当选项过多时，如上千条，传统的`select`下拉框会变得难以操作。为了解决这个问题，我们可以引入“模糊查询”功能，即用户在...
本文实例讲述了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应用和软件项目中非常常见，...
然而，为了实现更丰富的交互效果，前端开发者通常会使用库如React的`react-select`，Vue的`element-ui`，或者Angular的`ng-select`等。 二、筛选列表（Filter List） 筛选列表允许用户快速查找和定位所需信息。它...