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

angularjs中比较实用的multipleselect选择框的相关文章

点击事件中实现弹出一个选择框(如选择网络设置、选择电话短信联系方式)

1.网络设置 public void checkNetwork(){ //获取连接的管理对象 ConnectivityManager connectivityManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE); //获取当前正在使用的网络 NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo(); //判断网络是

js中,表单中的选择框学习与使用总结

选择框脚本 选择框是通过<select>和<option>元素来创建.下面从对选择框的几个操作,来学习,总结Js中操作选择框的方法 一.选择选项 (1)只允许选择一项的选择框,访问选项中的最简单方式,就是使用选择框的selectIndex属性. selectedIndex 属性可设置或返回下拉列表中被选选项的索引号.设置selectedIndex会导致取消以前的所有选项并选择指定的那一项,而读取selectedIndex则只会返回选中项第一项的索引值.注意:若允许多重选择,则仅会返

jeecg3.7中DictSelect数据字典下拉选择框的用法

1.参数 属性名                      类型        描述                                                                  是否必须             默认值 title                          string        标题                                                                  否       

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angula

AngularJS(6)-选择框Select

1.在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择框Select</title> <script src="angular-1.4.1/angular.min.js&qu

AngularJS初始化Select选择框

body { background: #f4f4f4 } .title { width: 100%; background: #5cb85c; padding: 5px; font-size: 20px; margin: 5px } 一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就是如何创建并初始化一个Select选择框.最近我又研究了一下Ang

cocos2dx2.2.2登录场景中Checkbox选择框的实现

在前两篇文章中,我们介绍了在注册场景中需要用到的输入框及弹出框的实现方式,这两篇文章中介绍的内容在登录场景同样会用到.而我们经常会在登录场景中见到的另一种元素就是自动登录或者记住密码的Checkbox选择框.那么,接下来就让我们看看这个选择框如何实现. 首先,我们先看一下效果 我们需要的就是一个Checkbox选择框,后面加上“自动登录”或者其他的文字.效果就是点击选择框或文字时,Checkbox的状态会进行切换:同时在程序中还要知道当前选择框的状态,只要我们能够实现这几点,这个功能就完成了.

如何实现PS中使用选择框、套索等工具后形成的蚂蚁线效果

用过PS的同学都知道使用选择框.套索.魔棒工具选择区域后,边线会有一个黑白条纹交替移动产生的动画,俗称蚂蚁线,作用是更明显的突出选择区域范围. ---原理--- 通过观察PS,发现:一.线条可以任意复杂:二.并且不是只往线条指向的一个方向移动:三.不同位置角度的黑白线段长度不同:四.可以跟随图片缩放自然的产生不同效果:五.当生成很多线条时,CPU占用率也很低(比如在复杂图像中使用魔棒时). 如何做到的呢?一开始我把这些"线"当成一条条黑白相间的线条处理,发现:一.达不到PS的效果:二.

解决v-for中遍历多个el-select时,下拉选择框同步选择问题

当v-for遍历多个el-select时,由于v-model绑定的值为同一个,导致下拉选择时多个下拉选择框同步选择问题 如图是v-model绑定的同一个seatValue数据: 解决办法: 一.为el-select绑定不同的v-mode值,将v-for传递的index值绑定在v-model的参数上( v-model="seatValue[index]" ) 二.通过axios获取数据时,创建一个新的seatValue空数组,通过map遍历获取到的fourthContentArr里的每一