一、AngularJs
AngularJS 是一个 JavaScript 框架。通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
1.四大特征
MVC模式、模块化、自动化双向数据绑定、依赖注入
2.使用
1)首先在页面引入核心包
<script src="../plugins/angularjs/angular.min.js"></script>
2)必须在body标签上写 ng-app
<body ng-app="">
3)用 {{表达式或变量}} 展示数据
4)ng-model :相当于name传值,前端也可以根据ng-model获取值存放到$scope中
5)$scope:是AngularJs 内置对象,有请求数据也有相应数据
6)$ng-init:只要页面一执行,首先会执行ng-init中的操作
7)var app=angular.module('app',[]) ==》定义了叫app的模块,定义以后一定要在body标签中声明使用的模块名称,
其中[]中是用力啊放插件的
8)ng-click:鼠标点击事件==》onclick
9)ng-repeat="x in list":相当于遍历list中的每一个x
10)$http:AngularJs 内置对象,主要作用发送http请求,并且发送ajax
$http.get $http.post
11)$event:可以获取当前操作的事件是什么,常用于复选框==》复选框哪个被勾选
二、demo
1.小问题
1)在新增完成后,增加成功后会在增加窗口留下值,在下一次新增时,默认是上次增加的值,
显然,我们在新增时不需要这种回显数据,故应在新建中声明ng-click="entity={}"
如:<button type="button" class="btn btn-default" title="新建" ng-click="entity={}" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
2)按钮点击无效
ng-click="dele()"不要忘记()
2.查询所有js
var app=angular.module('brandApp',['pagination'])//[]中为插件 app.controller('brandController',function($scope,$http){//$http 发送ajax $scope.findAll=function(){ $http.get('../brand/findAll.do').success(function(response){ $scope.list=response; }) } });
3.分页查询js代码
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js" type="text/javascript" ></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
//重新加载列表 数据 $scope.reloadList=function(){ //切换页码 $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分页控件配置 $scope.paginationConf = { // 当前页 currentPage: 1, // 默认每页条数 totalItems: 10, //每页展示多少条数据 itemsPerPage: 10, //每页展示多少条数据的下拉框 可以手动调 perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList();//重新加载 } }; //分页 第一个参数是当前页 第二个参数:每页展示的数据条数 $scope.findPage=function(page,rows){ $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success( function(response){ // 返回的数据集合 list<Brand> $scope.list=response.rows; // 查询的总记录数 $scope.paginationConf.totalItems=response.total;//更新总记录数 } ); }
4.新增和修改保存js
通过查询id是否存在,判断是新增还是修改
$scope.save=function(){ var methodName='add'; if($scope.entity.id!=null){//id不为null则代表着已经存在,应为修改brand methodName='update'; } $http.post('../brand/'+methodName+'.do',$scope.entity ).success( function(response){ if(response.success){ //重新查询 alert(response.message); $scope.reloadList();//重新加载 }else{ alert(response.message); } } ); }
//查询修改的实体
$scope.findOne=function(id){
$http.get('../brand/findOne.do?id='+id).success(
function(response){
$scope.entity= response;
}
);
}
5.批量删除
$scope.selectIds=[];//选中的ID集合 //更新复选 $scope.updateSelection = function($event, id) {//$event可以获取当前操作的事件是什么 if($event.target.checked){//如果是被选中,则增加到数组 $scope.selectIds.push(id); }else{ var idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);//删除 } } //批量删除 $scope.dele=function(){ //获取选中的复选框 $http.get('../brand/delete.do?ids='+$scope.selectIds).success( function(response){ if(response.success){ alert(response.message); $scope.reloadList();//刷新列表 }else{ alert(response.message); } } ); }