背景:希望有个下拉多选框,显示一个店铺的属性,其属性值类似于,如下表示: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+require+angular-ui-router环境搭建
angular-ui-bootstrap源码与demo完整版
Angular-ej2-angular-ui-components.zip,SyncFusion Angular UI组件库为构建现代Web应用程序提供了50多个跨浏览器、响应灵敏且轻量级的Angular UI控件。SyncFusion Angular UI组件库(Essential JS 2),Angularjs于...
前端项目-angular-ui-calendar,arshaw完整日历的完整AngularJS指令。
前端项目-angular-ui-router,基于状态的AngularJS路由
正在学习Angularjs和路由的Angularjs和ui-router的一个栗子(新手)
前端项目-angular-block-ui,允许您阻止Ajax请求上的用户交互的AngularJS模块。
前端项目-angular-ui-select,AngularJS用户界面选择
angular-swagger-ui, Swagger用户界面的angularJS实现 angular-swagger-uiangular-swagger-ui 是OpenAPI用户界面的angularJS实现OpenAPI ( 又名 Swagger ) 帮助你记录你的RESTful API 。OpenAPI通过提供集
angular-1.6.10 ,官方完整包 AngularJS 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 ...
根据官网上做的,跟网上有点小出入,测试没写!
Angular-Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support.zip,clever是具有angular 2和angularjs支持的bootstrap 4管理模板clever bootstrap 4管理模板具有angularjs和angular2支持。...
Clever-Bootstrap-4-Admin-Template-with-AngularJS-Angular-2-support-master
(7/2/14) 模板已经被提取出来,所以它们可以很容易地被覆盖,一个 la angular-ui-bootstrap。 用法: angular.module('myApp', ['multi-select', ...]); 例子: <multi-select ng-model="user.roles" ...
Angular UI 树 Angular UI Tree 是一个 AngularJS UI 组件,可以对嵌套列表进行排序,提供拖放支持并且不依赖于 jQuery。 如果您是使用angular-...加载 CSS 在您的应用程序中加载 css 文件: angular-ui-tree.mi
angular-ui-switch, 打开/关闭AngularJS的switch 按钮 已经废弃 ! Angular -ui-switch这是一个简单的switch 7样式指令,用于 AngularJS 。 你可以使用这里模块,因为你将使用默认的HTML复选框输入元素。 这是一个...
因为项目的需求,要求使用下拉多选来实现多个分类,网上搜了很多,包括jquery的select2,以及http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main里面的Basic Settings Example,可能是不会...
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者...
前端项目-angular-ui-tree,一个AngularJS用户界面组件,可以对嵌套列表进行排序,提供拖放支持,不依赖jQuery。