day03记 angular代码
一、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)用 {{表达式或变量}} 展示数据
如:{{ firstName }} 是通过 ng-model="firstName" 进行同步
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);
}
}
);
}
day03记 angular代码的更多相关文章
- 记Angular与Django REST框架的一次合作(2):前端组件化——Angular
注:这是这个系列的第二部分,主要集中在Angular的使用方面.之前使用过AngularJS(Angular 1.x),混在Django的模板中使用,这些页面一般完全是结果展示页.在有Django表单 ...
- angular代码分析之异常日志设计
angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最 ...
- VS2013中实现angular代码智能提示
第一步:在项目同添加angular js文件的引用: 这里使用NuGet包管理器来给项目添加angular js install-package angularjs 第二步:添加智能提示js文件 我们 ...
- 读 Angular 代码风格指南
读 Angular 代码风格指南 本文写于 2021 年 1 月 17 日 原文地址:Angular 文档 该文章拥有完整的代码风格指南--大到如何编排文件夹,小到如何进行变量命名都涉及.但是与 ng ...
- 记Angular与Django REST框架的一次合作(1):分离 or 不分离,it's the question
前言:本次尝试源于我们内部的一个项目,由于前端逻辑比较复杂,就打算将前后端分开来开发.由于之前用Django开发过软件,对Angular.js(Angular 1.0版)也有一定的了解,因此就将技术路 ...
- 在VS CODE中调试Angular代码
Chrome Dev Tools 可以调试js程序,但是可能需要和源码之间来回切换. 如果是使用VS CODE来开发Angular,可以直接在VS CODE中调试. 按照如下的步骤即可: 第一步, ...
- 记angular和asp.net使用grpc进行通信
AspNetCore配置grpc服务端 新建一个Demo项目: GrpcStartup, 目录结构如下图: GrpcStartup.GrpcServices需要安装下面的依赖 <PackageR ...
- [BI项目记]-搭建代码管理环境之服务端
上一篇介绍如何搭建环境进行文档版本的管理,这篇主要介绍搭建环境进行代码版本的管理. 即使是BI项目也要进行代码版本管理.代码版本管理的工具有很多,VSS, SVN等都是当下大家经常提起的,这里主要介绍 ...
- [BI项目记]-搭建代码管理环境之客户端
前面已经介绍了如何搭建代码管理环境的服务器端安装和配置,这里介绍对于客户端的几个场景. 首先对于开发人员来说,可以直接使用Visual Studio来连接,这里主要演示Visual Studio 20 ...
随机推荐
- Linux_用户权限管理
目录 目录 用户管理 useradd创建用户 userdel删除用户 usermod修改用户账号 passwd修改用户密码 用户权限设置 用户组管理 查看用户的属组 修改用户组gpasswd 为没有家 ...
- 阶段3 1.Mybatis_05.使用Mybatis完成CRUD_1 回顾Mybatis的环境搭建-实现查询所有功能
先回顾Mybits的环境搭建,. 直接next 直接点击finish 创建好的项目. 所有东西都自己写不现实,约束文件的头部还是拷贝过来 导入依赖坐标,Mybits mysql的驱动 log4j 单元 ...
- windows一次无线网卡被关闭事件
使用的是Dell的笔记本,fn+无线图标莫名的是蓝牙的启动. 有一天突然无线网卡无法上网,无法发现无线网络: 1. 在服务中开启"Wired AutoConfig"以及“WLAN ...
- js五种不同的遍历 (filter, map,foreach,every, some,)
var arr=[1,2,"a",2,4,1,4,"a",5,6,7,8,"aa","bb","c" ...
- [Web 前端] 023 js 的流程控制、循环和元素的获取、操作
1. Javascript 流程控制 用于"基于不同条件执行不同的动作"的场合 1.1 if 语句 三种形式 // 第一种 if... // 第二种 if... else ... ...
- kubernetes(k8s)容器编排工具基础概念
Kubernetes (K8s): 中文社区:https://www.kubernetes.org.cn/replication-controller-kubernetes 官网:https://ku ...
- Linux yum 命令篇
yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指定的服务器自动下载RPM包 ...
- Apache 强制SSL访问
RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R ...
- javascript中的继承-寄生组合式继承
前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...
- P1162填涂颜色
这还是一个搜索题,难度较低,但我提交第三次才AC.. 观察0地图左上角的上面和左面都是一,所以先把他找粗来,然后设成start,然后dfs找到与他联通的块,涂成2即可.再说一下自己犯的低级错误:1.当 ...