angularjs中比较实用的multipleselect选择框

Posted 2020-06-21 小骚木

一. 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 = ‘‘;
})