angularjs中比较实用的multipleselect选择框
2024-08-29 12:10:11
一. HTML
HTML中比较多逻辑代码,修改的时候要注意修改很多绑值的地方。
<div class="form-group">
<label class="col-lg-3 control-label">组织权限</label>
<div ng-init="enablePids = [];disablePids = [];">
<div class="col-lg-6" style="min-height:200px;margin-top:10px;margin-bottom:10px;">
<div class="col-sm-5" style="padding-left: 0px">
<select multiple="multiple" size="12"
style="min-width:150px; height:200px;background-color:#fff; " class="form-control"
ng-options="id as (privilegeNameFromId(id)) for id in removeArray(uiTemplateData.privilege_ids, entity.privilege)"
ng-model="disablePids"
name="unSelectedPrivilegeForOrganization"
ng-dblclick="entity.privilege =
entity.privilege.concat(disablePids);disablePids = []">
</select>
</div>
<div class="col-sm-2">
<br/><br/>
<button class="btn btn-default"
ng-click="entity.privilege =
entity.privilege.concat(disablePids);disablePids = []">>>
</button>
<br/><br/><br/>
<button class="btn btn-default"
ng-click="entity.privilege =
removeArray(entity.privilege, enablePids);enablePids = []"><<
</button>
</div>
<div class="col-sm-5" style="padding-right: 0px">
<select style="min-width:150px; height:200px; background-color:#fff;" class="form-control"
multiple="multiple"
size=12
name="SelectedPrivilegeForOrganization"
ng-options="id as (privilegeNameFromId(id)) for id in entity.privilege"
ng-model="enablePids"
ng-dblclick="entity.privilege =
removeArray(entity.privilege, enablePids);enablePids = []">
</select>
<input name="hasSelectedPrivilegeForOrganization"
ng-model="hasSelectedPrivilegeForOrganization" required ng-show="false">
<ul class="parsley-errors-list filled"
ng-show="form.hasSelectedPrivilegeForOrganization.$invalid
&& (form.unSelectedPrivilegeForOrganization.$dirty
|| form.SelectedPrivilegeForOrganization.$dirty || vertified)">
<li class="parsley-required">不能为空</li>
</ul>
</div>
</div>
</div>
</div>
二. JS
1. 先给出绑值的ngModel
$scope.entity = {
privilege: []
}
2. 显示值得ngModel
$scope.uiTemplateData = {
privileges: [],
privilege_ids: [],
}
3. 主要处理逻辑
(1)先发API请求数据回来后加到存值的地方。
(2)处理显示出来的Name
(3)该插件处理值只操作ID
function requestPrivilegeList(){
if (!isEditState){
DS.privilegeList({limit:2000, index:1}).then(function () {
var privileges = DS.data.unpermissions;
$scope.uiTemplateData.privileges = privileges;
var privilege_ids = [];
for (var index in privileges) {
var privilege = privileges[index];
privilege_ids.push(privilege.value);
}
$scope.uiTemplateData.privilege_ids = privilege_ids;
})
}
}
requestPrivilegeList();
$scope.privilegeNameFromId = function (id) {
var array = $scope.uiTemplateData.privileges;
for (index in array) {
var privilege = array[index];
if (privilege.value === id) {
return privilege.display_value;
}
}
return "Unknown";
}
$scope.removeArray = function (originalArray, removedArray) {
var resultArray = [];
for (var i = 0, k = 0; i < originalArray.length; i++) {
var finded = false;
var value = originalArray[i];
var length = removedArray === undefined ? 0 : removedArray.length;
for (k = 0; k < length; k++) {
if (value === removedArray[k]) {
finded = true;
break;
}
}
if (!finded) {
resultArray.push(originalArray[i]);
}
}
return resultArray;
}
$scope.hasSelectedPrivilegeForOrganization = 'true';
$scope.$watch('entity.privilege', function() {
var ids = $scope.entity.privilege;
if (ids && ids.length > 0) {
$scope.hasSelectedPrivilegeForOrganization = 'true';
return;
}
$scope.hasSelectedPrivilegeForOrganization = '';
})
最新文章
- Android中如何使用命令行查看内嵌数据库SQLite3
- 关于case语句中声明变量并初始化的注意事项
- 使用css3做钟表
- pythonchallenge 解谜 Level 8
- Lambda表达式公共拼接函数(原创)
- 后台向前台传递entity的list然后构筑combobox的方法(easyui)
- 如何解决WebkitBrowser使用出错“Failed to initialize activation context”
- SQL Server R2 2008中的SQL Server Management Studio 阻止保存要求重新创建表的更改问题的设置方法
- coding
- perl正则表达式第二周笔记
- Android杂谈--ListView之BaseAdapter的使用
- 浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓
- 用Date.ToString()输出中英文月份
- 网站压力测试ab 命令
- Matlab绘图基础——axis设置坐标轴取值范围
- 深入Java虚拟机(1)——Java体系结构
- Math对象中比较常用的计算数学相关的三个方法
- luogu1706全排列
- 前端 ----关于DOM的操作的相关实例
- Selenium简单测试页面加载速度的性能(Page loading performance)
热门文章
- 数学 Codeforces Round #219 (Div. 2) B. Making Sequences is Fun
- 【Python-2.7】删除空格
- grunt 全局使用
- QT 杂记
- 新安装数据库sqlserver2008r2,使用javaweb连接不上问题处理
- 写给新手的十一条 Docker 守则
- wpf mvvm模式下 在ViewModel关闭view
- 母牛的故事(hdoj 2018,动态规划递推,详解)
- Linux 安装 JDK 详解
- Oracle 常用目录结构(10g)