Java && AngularJs,select2

若水浮沉

于 2020-10-29 17:53:47 发布

阅读量258

点赞数

文章标签： javascript java angluarjs

本文链接：https://blog.csdn.net/weixin_44355227/article/details/109364823

版权

AngluarJS 菜鸟教程BUNOOB.COM

AngularJS中文网

AngluarJS{{}}

AngularJS 有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript 框架。它是一个以JavaScript 编写的库。它可通过 script 标签添加到 HTML 页面。 [2] AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

AngularJS 四大特征

MVC 模式

Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular 为客户端的 Web 应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的 Web 应用。 Model:数据,其实就是 angular 变量($scope.XX); View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是 function,数据的增删改查;

双向绑定

AngularJS 是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此， AngularJS 使得对 DOM 的操作不再重要并提升了可测试性。

依赖注入

依赖注入(Dependency Injection,简称 DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的 service 和 provider 两类对象，都可以根据形参名称实现 DI.

模块化设计

高内聚低耦合法则 1)官方提供的模块 ng、ngRoute、ngAnimate 2)用户自定义的模块 angular.module(‘模块名’,[ ])

$scope 通道符 $s c o p e 的使用贯穿整个 A n g u l a r J S A p p 应用, 它与数据模型相关联, 同时也是表达式执行的上下文 . 有了$ scope 就在视图和控制器之
间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $s c o p e, 同样的$ scope 发生改变时也会立刻重新渲染视图.
ng-controller 用于指定所使用的控制器。
ng-app:ng-app 指令作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的.ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法
ng-model 双向绑定在修改输入域的值时， AngularJS 属性的值也将修改：用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
ng-repeat相当与forEach,ng-repeat=“brand in list” 把list每一个拿出来给了brand

base.js

var app = angular.module("ds",[]);

brandService.js

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

    /*查找所有品牌*/
    this.findAll=function () {
        return $http.get("../brand/findAll")
    }

    /*品牌分页查询*/
    this.findByPage=function (pageNum,pageSize) {
        return $http.get("../brand/findByPage/"+pageNum+"/"+pageSize)
    }

    /*品牌新增*/
    this.add=function (brand1) {

        // alert(JSON.stringify(brand1))
        return $http.post("../brand/add",brand1);
    }

    /*品牌根据主键查询*/
    this.findById=function (id) {
        return $http.get("../brand/findById/"+id);
    }

    /*品牌根据主键 逻辑删除*/
    this.delByIds=function (ids) {
        return $http.post("../brand/delByIds",ids);
    }

});

baseController.js

//定义公用的controller 里的方法

app.controller('baseController',function ($scope) {

//相关于公共的父类，其它用的话继承就ok
//分页控件的初始设置
    $scope.paginationConf = {
        currentPage: 1,   //当前页码
        totalItems: 10,   //总条数
        itemsPerPage: 10,  //每页记录数
        perPageOptions: [10, 20, 30, 40, 50],  //每页记录数选择
        onChange: function(){  //当切换页码，重新执行方法
            $scope.reloadList();//重新加载
        }
    };
    //执行brandController.js中的findPage方法
    $scope.reloadList=function(){
        $scope.findByPage( $scope.paginationConf.currentPage,
            $scope.paginationConf.itemsPerPage);
    }

    /*多删*/
    $scope.selectIds=[]; // 1,2,34,45,5,6
    /*选中框*/
    $scope.selectedId=function ($event,id) {    //$event 当前对相
        //如果框框被选中 true false
        if($event.target.checked){
            //压栈 压进去push
            $scope.selectIds.push(id);
        }else{
            //没有被选中 删掉 splice（位置，个数）splice（index,2）
            var index = $scope.selectIds.indexOf(id);//找到没有选中的位置
            $scope.selectIds.splice(index,1);
        }
    }
    //数组转list
    //DsBrandExample example = new DsBrandExample();
    //DsBrandExample.Criteria criteria = example.createCriteria();
    //int[] a = {1,2,3,4};
    //List<int[]> ints = Arrays.asList(a);
});

brandController.js

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

    /*继承分页*/
    $controller('baseController',{$scope:$scope});

    /*查找所有品牌*/
    $scope.findAll=function () {
        $scope.reloadList();
        brandService.findAll().success(function (data) {
            $scope.list = data;
        });
    }


    /*品牌分页查询*/
    /*baseController 传过来pageNum，pageSize*/
    $scope.findByPage=function (pageNum,pageSize) {
        /*response 返回的数据*/
        brandService.findByPage(pageNum,pageSize).success(function (data) {
            $scope.list = data.rows;
            $scope.paginationConf.totalItems = data.total;//总记录数
        });
    }


    /*品牌新增*/
    // $scope.brand1={};
    $scope.add=function () {
        /*response 返回的数据*/
        brandService.add($scope.brand1).success(function (data) {
           alert(JSON.stringify(data));//(JSON.stringify(data)) : JSON 转 字符串
            if(data.success){
                alert("新增成功！")
                $scope.reloadList();
            }else {
                alert(data.message)
            }
        });
    }

    /*品牌根据主键查询*/
    // $scope.brand1={};
    $scope.findById=function (id) {
        /*response 返回的数据*/
        brandService.findById(id).success(function (data) {
           $scope.brand1=data.results;
        });
    }

    /*品牌根据主键逻辑删除*/
    // $scope.brand1={};
    $scope.delByIds=function () {
        brandService.delByIds($scope.selectIds).success(function (data) {
           $scope.reloadList();//重新加载页面
        });
    }
});

brand.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<!--导入js -->
	<script src="../plugins/angularjs/angular.min.js"></script>
	<!-- service-->
	<script src="../js/base_pagination.js" ></script>
	<script src="../js/service/brandService.js"></script>
	<script src="../js/controller/baseController.js" ></script>
	<script src="../js/controller/brandController.js" ></script>

	<!-- 分页组件开始 -->
	<script src="../plugins/angularjs/pagination.js"></script>
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<!-- 分页组件结束 -->

</head>
<!--	  ng-init="findAll()"-->
<body class="hold-transition skin-red sidebar-mini"
	ng-app="ds" ng-controller="brandController"
>
	<!--未解析-->
<!--	{{list}}-->
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group"><!--双向绑定-->
                                        <button ng-click="brand1={}" type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button ng-click="delByIds()" type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                                         
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作{{selectIds}}</th>
			                          </tr>
			                      </thead>
			                      <tbody>
			                          <tr ng-repeat="brand in list">
			                              <td><input  type="checkbox" ng-click="selectedId($event,brand.id)" ></td>
				                          <td>{{brand.id}}</td>
									      <td>{{brand.brandName}}</td>
		                                  <td>{{brand.firstLetter}}</td>
		                                  <td class="text-center">
		                                 	  <button ng-click="findById(brand.id)" type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>
		                                  </td>
			                          </tr>
			                      </tbody>
			                  </table>
							<!--数据列表/-->
							<!-- 分页 -->
							<tm-pagination conf="paginationConf"></tm-pagination>
							  
							 
                        </div>
                        <!-- 数据表格 /-->

                     </div>
                    <!-- /.box-body -->
         
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">品牌编辑</h3>
		</div>
		<div class="modal-body">		
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌名称</td>
					<input ng-model="brand1.id" hidden />
		      		<td><input ng-model="brand1.brandName" class="form-control" placeholder="品牌名称" >  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input  ng-model="brand1.firstLetter" class="form-control" placeholder="首字母">  </td>
		      	</tr>		      	
			 </table>				
		</div>
		<div class="modal-footer">						
			<button ng-click="add()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
<!--			{{brand1}}-->
		</div>
	  </div>
	</div>
</div>
   
</body>
</html>

TODO

select2
----(因为是angluarjs里调用select2，所以angluarjs的包在select2的前面)
Select2为您提供了一个可自定义的选择框，该框支持搜索，标记，远程数据集，无限滚动以及许多其他常用选项

若水浮沉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java && AngularJs,select2

AngluarJS 菜鸟教程BUNOOB.COMAngularJS中文网AngluarJSAngularJS 有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 select2Select2为您提供了一个可自定义的选择框，该框支持搜索，标记，远程数据集，无限滚动以及许多其他常用选项...
复制链接

扫一扫