angularjs中比较实用的multipleselect选择框

Posted 小骚木

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs中比较实用的multipleselect选择框相关的知识,希望对你有一定的参考价值。

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

 

以上是关于angularjs中比较实用的multipleselect选择框的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS实用基础知识---入门必备

实用 | 10 个AngularJS 框架!

AngularJS的简单实用

开发人员必备的10个实用的AngularJS小窍门

Angular JS的正确打开姿势——简单实用(上)

使用 AngularJS 比较表单验证中的两个输入值