静态下拉列表

修改 type_template.html  引入JS

<!-- slect2插件-->
<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script> <script src="../plugins/angularjs/angular.min.js"></script>
<script src="../js/base_pagination.js"></script>
<!-- 导入select2-angula-->
<script src="../js/angular-select2.js"></script>
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <script src="../js/service/typeTemplateService.js"></script>
<script src="../js/controller/baseController.js"></script>
<script src="../js/service/brandService.js"></script>
<script src="../js/controller/typeTemplateController.js"></script>

注意:base_pagination.js一定要在angular-select2.js之前导入,不然报app not define!

修改typeTemplateController.js  ,定义品牌列表数据

$scope.brandList={data:[{id:,text:'联想'},{id:,text:'华为'},{id:,text:'小米'}]};//品牌列表

(3)在type_template.html 用select2组件实现多选下拉框

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌(可多选)" type="text"/>  

multiple 表示可多选

Config用于配置数据来源

select2-model用于指定用户选择后提交的变量

最终实现效果如下:

动态下拉列表

1:从后端获取数据支撑

我们现在让这个下拉列表的数据从数据库中提取,修改后端代码获得数据(此处只展示Controller)

@RequestMapping("/selectOptionList")
public List<Map> selectOptionList(){
return brandService.selectOptionList();
}

2:修改youlexuan-manager-web的brandService.js

//下拉列表数据
this.selectOptionList=function(){
return $http.get('../brand/selectOptionList.do');
}

3:修改youlexuan-manager-web的typeTemplateController.js

因为我们在模板控制层中需要使用品牌服务层的方法,所以需要添加依赖注入

//控制层
app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplateService ,brandService){

使用品牌服务方法实现查询,结果赋给变量

$scope.brandList={data:[]};//品牌列表
  //读取品牌列表
  $scope.findBrandList=function(){
    brandService.selectOptionList().success(
      function(response){
        $scope.brandList={data:response};
      }
    );
  }
// 定义方法:获取JSON字符串中的某个key对应值的集合
$scope.jsonToString = function(jsonStr,key){
// 将字符串转成JSOn:
var jsonObj = JSON.parse(jsonStr);
var value = "";
for(var i=;i<jsonObj.length;i++){
if(i>){
value += ",";
}
value += jsonObj[i][key];
}
return value;
}

4:修改type_template.html ,添加JS引入

<script type="text/javascript" src="../js/base_pagination.js">  </script>
<script type="text/javascript" src="../js/service/typeTemplateService.js"> </script>
<script type="text/javascript" src="../js/service/brandService.js"> </script>
<script type="text/javascript" src="../js/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/typeTemplateController.js"> </script>

特别注意一下,JS引入的位置,要在typeTemplateController.js之前,因为该控制器要使用到它

5:修改type_template.html ,添加初始化

<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="typeTemplateController" ng-init="findBrandList()">

select2的简单使用的更多相关文章

  1. bootstrap select2 使用简单介绍

    1. 基本属性配置: $("#select2-id").select2({ templateResult : formatState, // 列表带图片 templateSelec ...

  2. select2简单例子

    1.html中静态值 html <%--multiple 为多选--%> <select multiple id="e1"> <option>& ...

  3. select2 简单解析

    <select name="supplierId" class="customsBrokerSel select2 absOpacity select2-hidde ...

  4. jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)

    第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...

  5. jQuery学习之路(5)- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  6. 利用Select2优化@Html.ListBoxFor显示,学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  7. select2 demo

    https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的opti ...

  8. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  9. JS组件系列——Bootstrap Select2组件使用小结

    前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...

随机推荐

  1. C# 分布式自增ID算法snowflake(雪花算法)

    概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的.有些时候我们希望能使用一种简 ...

  2. 删除Win10远程桌面中的无用的IP列表

    运行中,输入regedit,然后找到这个位置(也可在任务管理器的地址栏中,直接输入下面的地址),便可删除远程桌面中列出的一些无用的IP地址. 计算机\HKEY_CURRENT_USER\Softwar ...

  3. Delphi Webbrowser使用方法详解

    1.webbroser介绍 该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等操作.该 组件在Int ...

  4. wpf 窗体添加背景图片

    方法一:xaml中:<控件>   <控件.Background><ImageBrush ImageSource="/WpfApplication1;compon ...

  5. Django Form 初始化数据

    修改 urls.py 添加 path('initial.html', views.initial), 修改 models.py class UserInfo(models.Model): name = ...

  6. 消息中间件Kafaka - PHP操作使用Kafka

    Centos版本:Centos6.4,PHP版本:PHP7. 在上一篇文章中使用IP为192.168.9.154的机器安装并开启了Kafka进行了简单测试,充当了Kafka服务器. 本篇文章新开启一台 ...

  7. Python从零开始——迭代器与生成器

    一:迭代器 二:生成器

  8. python--微信小程序“跳一跳‘外挂

    参考网站:http://blog.csdn.net/LittleBeautiful/article/details/78955792 0x00:准备工具: Windows 10: 一个安卓真机 pyt ...

  9. Golang调用Python

    https://yq.aliyun.com/articles/117329 Python是时髦的机器学习御用开发语言,Golang是大红大紫的新时代后端开发语言.Python很适合让搞算法的写写模型, ...

  10. USACO Stamps

    洛谷 P2725 邮票 Stamps https://www.luogu.org/problem/P2725 JDOJ 1797: Stamps 邮票 https://neooj.com:8082/o ...