一. 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 = ‘‘; })
时间: 2024-10-13 20:44:51