品优购_品牌回显下拉表(3)_select2

最新推荐文章于 2022-11-03 11:42:41 发布

weixin_42333583

最新推荐文章于 2022-11-03 11:42:41 发布

阅读量646

点赞数

分类专栏：品优购下拉框功能

本文链接：https://blog.csdn.net/weixin_42333583/article/details/82428501

版权

品优购同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

下拉框功能

1 篇文章 0 订阅

订阅专栏

select2官网https://select2.org/getting-started/basic-usage ,select2官网里面有一个效果如下

我们需要得到的展示效果如下,所以select2跟我们实现的效果一样,我们就可以直接用他所以需要在html中导入他的js

第一步: service服务层

服务层发送一个请求,请求得到所有的关联品牌或者关联规格 ,所以不需要向后台传参数(发两次请求,品牌一次,规格一次),此处以发送一次为例讲解.

app.service('typeTemplateService',function($http){

//day03品牌下拉列表
this.selectOption=function () {
    return $http.get("../brand/selectOption.do");
}

第二步:controller控制层

控制层需要定义好两个对象,对象里面放了很多个数据,遍历就可以取出用于存放品牌名称和规格名称 ,因为有多个需要定义数组

app.controller('typeTemplateController' ,function($scope,$controller,typeTemplateService,brandService){   

$scope.brandList={data:[]}
//得到的数据类似于$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};
$scope.specList={data: []}
$scope.findBrandList=function () {
   brandService.selectOption().success(
      function (response) {
               $scope.brandList.data=response;
      }
)};

第三步:html层

引入依赖,除了常规的js外还要引入select2的js

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

   <script src="../plugins/select2/angular-select2.js" type="text/javascript"></script>
</head>

表明是angular前端的html,此处需要ng-init="findBrandList();findSpeList()" 两个方法,一个是获取品牌列表的,一个是获取规格列表的

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

在html中加入<input select2 select2-model="entity.brandIds" config="brandList" multiple placeholder="支持多选哦" class="form-control" type="text"/> 这一句话是从select展示效果的页面粘贴过来的,这样就可以实现多选的操作.

**select2-model用于指定用户选择后提交的变量** 也就是说提交后需要存储在数据库中的数据

**Config用于配置数据来源** 也就是说需要回显在下拉列表框中的数据

**multiple 表示可多选**

<table class="table table-bordered table-striped"  width="800px">
       <tr>
          <td>模块名称</td>
          <td><input  class="form-control" placeholder="模块名称" ng-model="entity.name">  </td>
       </tr>           
       <tr>
          <td>关联品牌</td>
          <td>
         <input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="支持多选哦" class="form-control" type="text"/>
          </td>
       </tr>
       <tr>
          <td>关联规格</td>
          <td>
         <input select2  select2-model="entity.specIds" config="specList" multiple placeholder="支持多选哦" class="form-control" type="text"/>
          </td>
       </tr>   
 </table>

效果如下:

提交的话用select2-model="entity.brandIds" 属性将多个品牌存储在entity中,点击保存就触发save方法:可以将对象传给下一层,此处就不写了.

<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>

weixin_42333583

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
品优购_品牌回显下拉表(3)_select2

select2官网https://select2.org/getting-started/basic-usage ,select2官网里面有一个效果如下我们需要得到的展示效果如下,所以select2跟我们实现的效果一样,我们就可以直接用他所以需要在html中导入他的js 第一步: service服务层服务层发送一个请求,请求得到所有的关联品牌或者关联规格 ...
复制链接

扫一扫

专栏目录