angular代码实例一
来源：互联网 发布：淘宝内置密码有什么用? 编辑：程序博客网 时间：2024/06/05 14:16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style>
.input{
/* 设置圆角 */
border-radius:5px ;
}
div{
width:800px;
}
*{
margin: 4px auto;
text-align: center;
}
.mStateT{
/* 已发货是绿色 */
background:green
}
.mStateF{
/* 未发货是黄色 */
background:yellow
}
button{
/* 按钮是粉色 */
margin-left:10px;
background:pink
}
/* 隔行换色 */
#tab tr:nth-of-type(odd){
background:#FFFFCD
}
#tab tr:nth-of-type(even){
background:#E5F1FB
}
table{
border-radius:5px ;
}
</style>
</head>
<body ng-app="MyApp" ng-controller="MCtrl">
<div>
<button class="input" ng-click="isShow=true">新增订单</button>
<button class="input" ng-click="batchRemove()">批量删除</button>
<input placeholder="按商品名称查询" class="input" ng-change="queryByName()" ng-model="nameQuery" />
<input placeholder="按手机号查询" class="input" ng-change="queryByTel()" ng-model="telQuery"/>
<select class="input" ng-options="x for x in states" ng-change="queryByState()" ng-model="sel" ng-init="sel=states[0]">
</select>
<table cellpadding="0px" cellspacing="0xp" border="1px" width="800px" id="tab">
<tr style="background:yellow">
<th><input type="checkbox" ng-click="selectAll()" id='totalSelect'/></th>
<th>id<button class="input" ng-click="orderById()"> 排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button class="input" ng-click="orderByPrice()"> 排序</button></th>
<th>城市</th>
<th>下单时间<button class="input" ng-click="orderByTime()"> 排序</button></th>
<th>状态</th>
</tr>
<tr ng-repeat="arr in marray">
<td><input type="checkbox" class="chlidCB"/></td>
<td>{{arr.id}}</td>
<td>{{arr.gname}}</td>
<td>{{arr.name}}</td>
<td>{{arr.tel}}</td>
<td>{{arr.price|currency:"￥："}}</td>
<td>{{arr.city}}</td>
<td>{{arr.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<!--<button>{{arr.state==true?"已发货":"未发货"}}</button>-->
<td>
<button ng-hide="sta" style="background:green" ng-init="sta = arr.state" ng-click="sta=true;mSend($index,true) ">未发货</button>
<button ng-show="sta" style="background:yellow" ng-init="sta = arr.state" ng-click="sta=false;mSend($index,false)">已发货</button>
</td>
</tr>
</table>
<div ng-show="isShow">
<div style="width:170px;height:40px;border:1px solid black;line-height:40px;">新增订单</div>
<fieldset style="width:600px">
<legend>添加订单信息</legend>
<table>
<tr>
<td>商品名</td>
<td>
<input type="text" ng-model="addMeun_gname"/>
<span id="gname_err"></span>
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" ng-model="addMeun_uname"/>
<span id="uname_err"></span>
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" ng-model="addMeun_tel"/>
<span id="tel_err"></span>
</td>
</tr>
<tr>
<td>价格</td>
<td>
<input type="text" ng-model="addMeun_price"/>
<span id="price_err"></span>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select ng-options="x for x in citys" ng-model="addMeun_city" ng-init="addMeun_city=citys[0]">
</select>
</td>
</tr>
<tr>
<td ><button ng-click='addData()'>保存</button></td>
<td ><button ng-click="isShow=flase">隐藏添加菜单</button></td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
<script>
// 初始化(刷新)页面时将全选复选框取消选中
$(function(){
document.getElementById("totalSelect").checked = false
})
// 初始化模块
var mm = angular.module("MyApp",[])
// 初始化控制器 并注入依赖
mm.controller("MCtrl",function($scope,$filter){
// 初始化数组
$scope.marray = [
{"id":10001,"gname":"小米","name":"流弊鹏","tel":18845678901,"price":10000,"city":"晋城","time":1513150113535,"state":false},
{"id":10002,"gname":"三星","name":"黑子阳","tel":18665432102,"price":7000,"city":"黑龙江某市","time":1513050113265,"state":false},
{"id":10006,"gname":"IPhone8","name":"毒蛇罩","tel":15165432103,"price":8000,"city":"邯郸","time":1511050113565,"state":false},
{"id":10004,"gname":"IPhone7","name":"逗比强","tel":13965432104,"price":5000,"city":"山西某市","time":1503050113515,"state":true},
{"id":10005,"gname":"vivo","name":"怼子林","tel":13365432105,"price":4000,"city":"吉林某市","time":1503050113565,"state":true},
{"id":10003,"gname":"OPPO","name":"呆子鹿","tel":18765432106,"price":6000,"city":"河南某市","time":1513000113515,"state":false},
{"id":10007,"gname":"华为","name":"四眼欣","tel":18965432107,"price":2000,"city":"不详","time":1512150113565,"state":false},
{"id":10008,"gname":"魅族","name":"破飞 ","tel":13465432108,"price":1000,"city":"不详","time":1410050113565,"state":false},
]
// 给下拉列表赋值
$scope.states = ["-按状态查询-","---未发货---","---已发货---"]
$scope.citys = ["选择城市","山东","东北"]
// 复制一个数组
var goods = $scope.marray
// 通过名字模糊查询
$scope.queryByName = function(){
$scope.marray = goods // 还原数组
var filter = $filter("filter")
$scope.marray = filter($scope.marray,{gname:$scope.nameQuery})
}
// 通过电话号码模糊查询
$scope.queryByTel = function(){
$scope.marray = goods // 还原数组
var filter = $filter("filter")
$scope.marray = filter($scope.marray,{tel:$scope.telQuery})
}
// 获取排序过滤器对象
var mOrder = $filter("orderBy")
// 声明一个标识,以便倒序和正序的切换
var flag = true;
// 通过ID进行排序
$scope.orderById = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-id")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"id")
}
// 更改标识
flag = !flag
}
// 通过价格进行排序
$scope.orderByPrice = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-price")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"price")
}
// 更改标识
flag = !flag
}
// 通过时间进行排序
$scope.orderByTime = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-time")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"time")
}
// 更改标识
flag = !flag
}
// 通过发货状态查看订单
$scope.queryByState = function(){
$scope.marray = goods
if($scope.sel==$scope.states[1]){
$scope.marray =$filter("filter")($scope.marray,"false")
}else if($scope.sel==$scope.states[2]){
$scope.marray =$filter("filter")($scope.marray,"true")
}
}
// 发货/取消发货
$scope.mSend = function($index,sta){
$scope.marray[$index].state = sta
}
// 非空验证
function checkIsNull(text,name,hint){
if(text==null||text==undefined||text==""){
$(name).text(hint+"不能为空")
return false
}
$(name).text("")
return true
}
// 添加数据
$scope.addData = function(){
// 判断输入的值是否符合规则
var flag1 = checkIsNull($scope.addMeun_gname,"#gname_err","商品名称")
var flag2 = checkIsNull($scope.addMeun_uname,"#uname_err","姓名")
var flag3 = checkIsNull($scope.addMeun_tel,"#tel_err","电话号码")
var flag4 = checkIsNull($scope.addMeun_price,"#price_err","价格")
// 验证通过添加数据
if(flag1 && flag2 && flag3 && flag4){
// 获取当前时间(毫秒值)
var date = new Date().getTime()
// 随机一个ID
var id = parseInt(Math.random()*9999)+10000
// 添加数据到数组
goods.push({
"id":id,"gname":$scope.addMeun_gname,"name":$scope.addMeun_uname,
"tel":$scope.addMeun_tel,"price":$scope.addMeun_price
,"city":$scope.addMeun_city,"time":date,"state":false
})
}
}
// 全选/全不选
$scope.selectAll = function(){
// 获取class为chlidCB的复选框
var cbs = $(".chlidCB")
// 遍历赋值
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = document.getElementById("totalSelect").checked
}
}
// 批量删除
$scope.batchRemove = function(){
var cbs = $(".chlidCB")
// 反向遍历删除
for (var i = cbs.length-1; i > -1; i--) {
if(cbs[i].checked == true){
$scope.marray.splice(i,1)
}
}
}
})
</script>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style>
.input{
/* 设置圆角 */
border-radius:5px ;
}
div{
width:800px;
}
*{
margin: 4px auto;
text-align: center;
}
.mStateT{
/* 已发货是绿色 */
background:green
}
.mStateF{
/* 未发货是黄色 */
background:yellow
}
button{
/* 按钮是粉色 */
margin-left:10px;
background:pink
}
/* 隔行换色 */
#tab tr:nth-of-type(odd){
background:#FFFFCD
}
#tab tr:nth-of-type(even){
background:#E5F1FB
}
table{
border-radius:5px ;
}
</style>
</head>
<body ng-app="MyApp" ng-controller="MCtrl">
<div>
<button class="input" ng-click="isShow=true">新增订单</button>
<button class="input" ng-click="batchRemove()">批量删除</button>
<input placeholder="按商品名称查询" class="input" ng-change="queryByName()" ng-model="nameQuery" />
<input placeholder="按手机号查询" class="input" ng-change="queryByTel()" ng-model="telQuery"/>
<select class="input" ng-options="x for x in states" ng-change="queryByState()" ng-model="sel" ng-init="sel=states[0]">
</select>
<table cellpadding="0px" cellspacing="0xp" border="1px" width="800px" id="tab">
<tr style="background:yellow">
<th><input type="checkbox" ng-click="selectAll()" id='totalSelect'/></th>
<th>id<button class="input" ng-click="orderById()"> 排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button class="input" ng-click="orderByPrice()"> 排序</button></th>
<th>城市</th>
<th>下单时间<button class="input" ng-click="orderByTime()"> 排序</button></th>
<th>状态</th>
</tr>
<tr ng-repeat="arr in marray">
<td><input type="checkbox" class="chlidCB"/></td>
<td>{{arr.id}}</td>
<td>{{arr.gname}}</td>
<td>{{arr.name}}</td>
<td>{{arr.tel}}</td>
<td>{{arr.price|currency:"￥："}}</td>
<td>{{arr.city}}</td>
<td>{{arr.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<!--<button>{{arr.state==true?"已发货":"未发货"}}</button>-->
<td>
<button ng-hide="sta" style="background:green" ng-init="sta = arr.state" ng-click="sta=true;mSend($index,true) ">未发货</button>
<button ng-show="sta" style="background:yellow" ng-init="sta = arr.state" ng-click="sta=false;mSend($index,false)">已发货</button>
</td>
</tr>
</table>
<div ng-show="isShow">
<div style="width:170px;height:40px;border:1px solid black;line-height:40px;">新增订单</div>
<fieldset style="width:600px">
<legend>添加订单信息</legend>
<table>
<tr>
<td>商品名</td>
<td>
<input type="text" ng-model="addMeun_gname"/>
<span id="gname_err"></span>
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" ng-model="addMeun_uname"/>
<span id="uname_err"></span>
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" ng-model="addMeun_tel"/>
<span id="tel_err"></span>
</td>
</tr>
<tr>
<td>价格</td>
<td>
<input type="text" ng-model="addMeun_price"/>
<span id="price_err"></span>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select ng-options="x for x in citys" ng-model="addMeun_city" ng-init="addMeun_city=citys[0]">
</select>
</td>
</tr>
<tr>
<td ><button ng-click='addData()'>保存</button></td>
<td ><button ng-click="isShow=flase">隐藏添加菜单</button></td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
<script>
// 初始化(刷新)页面时将全选复选框取消选中
$(function(){
document.getElementById("totalSelect").checked = false
})
// 初始化模块
var mm = angular.module("MyApp",[])
// 初始化控制器 并注入依赖
mm.controller("MCtrl",function($scope,$filter){
// 初始化数组
$scope.marray = [
{"id":10001,"gname":"小米","name":"流弊鹏","tel":18845678901,"price":10000,"city":"晋城","time":1513150113535,"state":false},
{"id":10002,"gname":"三星","name":"黑子阳","tel":18665432102,"price":7000,"city":"黑龙江某市","time":1513050113265,"state":false},
{"id":10006,"gname":"IPhone8","name":"毒蛇罩","tel":15165432103,"price":8000,"city":"邯郸","time":1511050113565,"state":false},
{"id":10004,"gname":"IPhone7","name":"逗比强","tel":13965432104,"price":5000,"city":"山西某市","time":1503050113515,"state":true},
{"id":10005,"gname":"vivo","name":"怼子林","tel":13365432105,"price":4000,"city":"吉林某市","time":1503050113565,"state":true},
{"id":10003,"gname":"OPPO","name":"呆子鹿","tel":18765432106,"price":6000,"city":"河南某市","time":1513000113515,"state":false},
{"id":10007,"gname":"华为","name":"四眼欣","tel":18965432107,"price":2000,"city":"不详","time":1512150113565,"state":false},
{"id":10008,"gname":"魅族","name":"破飞 ","tel":13465432108,"price":1000,"city":"不详","time":1410050113565,"state":false},
]
// 给下拉列表赋值
$scope.states = ["-按状态查询-","---未发货---","---已发货---"]
$scope.citys = ["选择城市","山东","东北"]
// 复制一个数组
var goods = $scope.marray
// 通过名字模糊查询
$scope.queryByName = function(){
$scope.marray = goods // 还原数组
var filter = $filter("filter")
$scope.marray = filter($scope.marray,{gname:$scope.nameQuery})
}
// 通过电话号码模糊查询
$scope.queryByTel = function(){
$scope.marray = goods // 还原数组
var filter = $filter("filter")
$scope.marray = filter($scope.marray,{tel:$scope.telQuery})
}
// 获取排序过滤器对象
var mOrder = $filter("orderBy")
// 声明一个标识,以便倒序和正序的切换
var flag = true;
// 通过ID进行排序
$scope.orderById = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-id")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"id")
}
// 更改标识
flag = !flag
}
// 通过价格进行排序
$scope.orderByPrice = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-price")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"price")
}
// 更改标识
flag = !flag
}
// 通过时间进行排序
$scope.orderByTime = function(){
if(flag){
// falg为ture倒序
$scope.marray = mOrder(goods,"-time")
}else{
// falg为false倒序
$scope.marray = mOrder(goods,"time")
}
// 更改标识
flag = !flag
}
// 通过发货状态查看订单
$scope.queryByState = function(){
$scope.marray = goods
if($scope.sel==$scope.states[1]){
$scope.marray =$filter("filter")($scope.marray,"false")
}else if($scope.sel==$scope.states[2]){
$scope.marray =$filter("filter")($scope.marray,"true")
}
}
// 发货/取消发货
$scope.mSend = function($index,sta){
$scope.marray[$index].state = sta
}
// 非空验证
function checkIsNull(text,name,hint){
if(text==null||text==undefined||text==""){
$(name).text(hint+"不能为空")
return false
}
$(name).text("")
return true
}
// 添加数据
$scope.addData = function(){
// 判断输入的值是否符合规则
var flag1 = checkIsNull($scope.addMeun_gname,"#gname_err","商品名称")
var flag2 = checkIsNull($scope.addMeun_uname,"#uname_err","姓名")
var flag3 = checkIsNull($scope.addMeun_tel,"#tel_err","电话号码")
var flag4 = checkIsNull($scope.addMeun_price,"#price_err","价格")
// 验证通过添加数据
if(flag1 && flag2 && flag3 && flag4){
// 获取当前时间(毫秒值)
var date = new Date().getTime()
// 随机一个ID
var id = parseInt(Math.random()*9999)+10000
// 添加数据到数组
goods.push({
"id":id,"gname":$scope.addMeun_gname,"name":$scope.addMeun_uname,
"tel":$scope.addMeun_tel,"price":$scope.addMeun_price
,"city":$scope.addMeun_city,"time":date,"state":false
})
}
}
// 全选/全不选
$scope.selectAll = function(){
// 获取class为chlidCB的复选框
var cbs = $(".chlidCB")
// 遍历赋值
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = document.getElementById("totalSelect").checked
}
}
// 批量删除
$scope.batchRemove = function(){
var cbs = $(".chlidCB")
// 反向遍历删除
for (var i = cbs.length-1; i > -1; i--) {
if(cbs[i].checked == true){
$scope.marray.splice(i,1)
}
}
}
})
</script>
阅读全文
0 0
- angular代码实例一
- angular $q 官方实例代码
- angular双向数据绑定实例代码
- Android JNI实例代码(一)
- Android JNI实例代码(一)
- Android JNI实例代码(一)
- Android JNI实例代码(一)
- Android JNI实例代码(一)
- angular实例分页【pagination】
- angular 完整实例
- angular上手实例
- 简单的angular实例
- angular-daterangepicker实例
- angular学习笔记一
- angular笔记（一）
- Angular.js学习一
- angular基础（一）
- 一，Angular自定义指令
- 点击页面空白处关闭气泡或弹层
- Druid 介绍及配置
- Spring自定义缓存管理及配置Ehcache缓存
- Git命令经验总结
- Guys, what is better than sex?
- angular代码实例一
- 关于auto.offset.reset的一些问题
- 个人笔记
- SpringBoot学习：IDEA中快速搭建springboot项目
- 跳跃游戏
- phpStudy配置详解（window）
- 4.3（5）
- java中continue和break的区别
- oracle 时间格式化会多出12小时
