Angular JQuery 实现简单快递管理界面

最新推荐文章于 2023-07-21 17:10:16 发布
最新推荐文章于 2023-07-21 17:10:16 发布
阅读量909 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MissGentlemen/article/details/78802026
版权
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/sty.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>


<body ng-app="MyApp" ng-controller="MyCont">
<center ng-hide="hi">
<input type="button" value="新增订单" class="btn" ng-click="tian()"/>
<input type="button" value="批量删除" class="btn" ng-click="del_sel()"/>
<input type="text" placeholder="按商品名称查询" class="se1" ng-model="shop" ng-blur="name()"/>
<input type="text" placeholder="按手机号查询" class="se" ng-model="num" ng-blur="num_sel()"/>
<select class="sel" ng-model="zhuang_sel" ng-change="zhuang()">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select><br />
<table class="table" cellpadding="0px" cellspacing="0px">
<tr style="background-color: #999999">
<td><input type="checkbox" ng-click="quan()" ng-model="cb"/></td>
<td>id&nbsp;&nbsp;<input type="button" value="排序" class="pai" ng-click="id_pai()"/></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格&nbsp;&nbsp;<input type="button" value="排序" class="pai" ng-click="price_pai()"/></td>
<td>城市</td>
<td>下单时间&nbsp;&nbsp;<input type="button" value="排序" class="pai" ng-click="time_pai()"/></td>
<td>状态</td>
</tr>
<tr ng-repeat="li in xin">
<td><input type="checkbox" ng-checked="cb" ng-click="chec($index)"/></td>
<td>{{li.id}}</td>
<td>{{li.goodsName}}</td>
<td>{{li.userName}}</td>
<td>{{li.tel}}</td>
<td>{{li.price|currency:"￥:"}}</td>
<td>{{li.city}}</td>
<td>{{li.time|date:"MM-dd HH:mm:ss"}}</td>
<td><input  type="button" value="{{li.goodsState}}" class="{{li.state}}" ng-click="haha($index)"/></td>
</tr>
</table>
</center>
<center ng-show="sh">
<button style="border-radius: 5px;">新增订单</button>
<fieldset class="fie">
<legend>haha</legend>
<form>
<table>
<tr>
<td>id</td>
<td><input type="text" id="sel_id"/></td>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" id="sel_name"/></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" id="sel_user"/></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" id="sel_tel"/></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" id="sel_pirce"/></td>
</tr>
<tr>
<td>城市</td>
<td>
<select id="sel_cary">
<option>北京</option>
<option>郑州</option>
<option>上海</option>
<option>杭州</option>
<option>黑龙江</option>
</select>
</td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="text" id="sel_time"/></td>
</tr>
<tr>
<td>状态</td>
<td>
<select id="sel_zhuang">
<option>已发货</option>
<option>未发货</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="button" value="保存" ng-click="bao()"/></td>
</tr>
</table>
</form>
</fieldset>
</center>
<script>

var arr = [{
id: 2001,
goodsName: "iPhoneX",
userName: "张三",
tel: 1352565588,
price: 8699.00,
city: "北京",
time: "1123100000",
goodsState: "已发货",
state: true,
flag: false
},
{
id: 3006,
goodsName: "iPhone6",
userName: "王红",
tel: 18524565588,
price: 5635.00,
city: "郑州",
time: "1123113820",
goodsState: "已发货",
state: true,
flag: false
},
{
id: 5312,
goodsName: "iPhone7",
userName: "赵小龙",
tel: 17545585598,
price: 6180.00,
city: "北京",
time: "1123091730",
goodsState: "未发货",
state: false,
flag: false
},
{
id: 2132,
goodsName: "iPhone8",
userName: "赵强",
tel: 17625565618,
price: 7190.00,
city: "上海",
time: "1123104021",
goodsState: "未发货",
state: false,
flag: false
}
]
var mo = angular.module("MyApp", []);
mo.controller("MyCont", function($scope,$filter) {
$scope.xin = arr;
$scope.tian=function(){
$scope.hi=true;
$scope.sh=true;
}
$scope.name=function(){
var aa = $scope.shop;
if(aa!=undefined){
$scope.xin = $filter("shopsha")(arr,aa);
}else{
alert("内容不能为空")
}
}
$scope.num_sel=function(){
var aa = $scope.num;
if(aa!=undefined){
$scope.xin = $filter("num_test")(arr,aa);
}else{
alert("内容不能为空")
}

}
$scope.zhuang=function(){
var aa = $scope.zhuang_sel;
$scope.xin = $filter("zhuang_test")(arr,aa);
}
var id_flag=false;
$scope.id_pai=function(){
if(id_flag){
arr.sort(function(a,b){
return b.id-a.id;
})
}else{
arr.sort(function(a,b){
return a.id-b.id;
})
}
id_flag=!id_flag;
arr=$scope.xin;
}
var price_flag=false;
$scope.price_pai=function(){
if(price_flag){
arr.sort(function(a,b){
return b.price-a.price;
})
}else{
arr.sort(function(a,b){
return a.price-b.price;
})
}
price_flag=!price_flag;
arr=$scope.xin;
}
var time_flag=false;
$scope.time_pai=function(){
if(time_flag){
arr.sort(function(a,b){
return b.time-a.time;
})
}else{
arr.sort(function(a,b){
return a.time-b.time;
})
}
time_flag=!time_flag;
arr=$scope.xin;
}
$scope.haha=function($index){

if(arr[$index].goodsState=="已发货"){
arr[$index].goodsState="未发货"
arr[$index].state=false;
}else{
arr[$index].goodsState="已发货"
arr[$index].state=true;
}
$scope.xin=arr;
}
$scope.quan=function(){
var qwe = $scope.cb;
for (var i=0;i<arr.length;i++) {
arr[i].flag=qwe;
}
$scope.xin=arr;
}
$scope.chec=function($index){
arr[$index].flag=!arr[$index].flag;
$scope.xin=arr;
}
$scope.del_sel=function(){
for (var i=arr.length-1;i>=0;i--) {
if(arr[i].flag&&!(arr[i].state)){
arr.splice(i,1);
}
}
$scope.xin=arr;
}
$scope.bao=function(){

if(test1("#sel_id")&&test1("#sel_name")&&test1("#sel_user")&&test1("#sel_tel")&&test1("#sel_pirce")&&test1("#sel_cary")&&test1("#sel_time")&&test1("#sel_zhuang")){
var val1 = $("#sel_id").val()
var val2 = $("#sel_name").val()
var val3 = $("#sel_user").val()
var val4 = $("#sel_tel").val()
var val5 = $("#sel_pirce").val()
var val6 = $("#sel_cary").val()
var val7 = $("#sel_time").val()
var val8 = $("#sel_zhuang").val()
var obj={
id: val1,
goodsName: val2,
userName: val3,
tel: val4,
price: val5,
city: val6,
time: val7,
goodsState: val8,
state: false,
flag: false
}
arr.push(obj);
$scope.xin=arr;
$scope.hi=false;
$scope.sh=false;
}else{
alert("失败!不能为空");
}
}
})

mo.filter("shopsha",function(){
return function(input,aa){
var arr2=[];
for (var i=0;i<input.length;i++) {
if(input[i].goodsName==aa){
arr2.push(input[i])
}
}
if(arr2.length==0){
alert("对不起没有数据")
}
return arr2
}
})
mo.filter("num_test",function(){
return function(input,aa){
var arr2=[];
for (var i=0;i<input.length;i++) {
if((input[i].tel+"").indexOf(aa)!=-1){
arr2.push(input[i])
}
}
if(arr2.length==0){
alert("对不起没有数据")
}
return arr2
}
})
mo.filter("zhuang_test",function(){
return function(input,aa){
var arr2=[]
for (var i=0;i<input.length;i++) {
if(input[i].goodsState==aa){
arr2.push(input[i])
}
}
if(aa=="--按状态查询--"){
return input;
}
return arr2;
}
})
mo.filter("but_test",function(){
return function(input){

}
})
function test1(yang){
var val = $(yang).val();
var f=/^\s*$/;
if(f.test(val.trim())){
$(yang).css("border","1px solid red");
return false;
}else{
$(yang).css("border","1px solid black");
return true;
}
}
</script>
</body>


</html>
MissGentlemen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jQuery,Angular实现登录界面验证码详解
10-19
主要介绍了使用jQuery,Angular实现登录界面验证码详解,需要的朋友可以参考下
【angular-基础教程】引入jQuery
qq_41243979的博客
11-24 1333
angular中使用jquery的步骤： 第一步：安装jquery npm install --save jquery 第二步：安装jQuery的声明文件 npm install @types/jquery --save 第三步：检查安装是否成功 前两步成功的话，会在package.json文件中多处这两行 "@types/jquery":"^3.2.12", "jquery":"^3.2.1", 第四步：使用jquery 先使用impor命令引用jquery，然后就可以在需要的地方使用jquery。
angular里使用jquery
web
03-08 1529
是angular2版本，不是angularjs版本 1、下载jquery npm install jquery --save 下载ts版本的包 npm i @types/jquery --save 2、引入 import * as $ from 'jquery'; 3、使用示例 ngOnInit() { // 禁用右键点击 $(document).ready(() => { $(document).bind('contextmenu', (e) => {
具有jQuery背景的程序员如何转换为AngularJS思考模式（译）
weixin_30609331的博客
10-23 200
最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同，如果不能认识到这点而对于之前做jQuery开发的程序员，去直接学习angularjs的话，很可能学了很久还不知道这个东西能用来干什么以及怎么使用，怎么和UI进行结合等问题,在stackoverflow上找到一篇关于这方面的文章，阅读之后颇有收获，在此基础上将它译成中文，以求...
angular 调用jquery javascrpt
最新发布
07-21 94
angular 调用javascript
jQuery和AngularJS的区别浅析
fucong920618717的博客
04-24 1743
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器. AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀...
jquery,js简单实现类似Angular.js双向绑定
01-19
刚了解了下Angular.js，发现Angular.js绑定数据方面非常方便，套下教程demo: 名字: <input ng-model=name> 你输入了: {{name}} 我就想着，使用jq/js怎么实现类似的效果，后来找找，发现使用...
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
10-20
主要介绍了Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例，具有一定的参考价值，有兴趣的可以了解一下。
Angular刷新当前页面的实现方法
10-17
主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Angular5中状态管理的实现
10-18
主要介绍了Angular5中状态管理的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
angularJS和Jquery
10-01
AngularJS1.5.8和Jquery3.2.1 JS文件 enenenenenenenenenen
jquery table 添加、删除行、列
08-21
使用jquery对行列进行删除、新增,动态添加。
AngularJs 后台登录界面
01-07
运用AngularJs 技术 开发后台登录界面
jQuery删除table指定行
12-13
jQuery删除table指定行,详细看博客http://blog.csdn.net/mybelief321/article/details/50282111
快递服务申请系统原型界面
05-23
配合jQuery搭载的快递服务申请系统的原型界面，目录结构： │ apply.html │ apply_examine.html │ Audit_list.html │ bill_list.html │ detail.html │ group_list.html │ Index.html │ list.html │ replace_apply.html │ Replace_list.html │ service_list.html │ user_list.html │ ├─css │ │ apply.css │ │ apply_examine.css │ │ demo.css │ │ detail.css │ │ index.css │ │ replace_apply.css │ │ │ └─themes │ │ color.css │ │ icon.css │ │ │ ├─black │ │ │ accordion.css │ │ │ calendar.css │ │ │ combo.css │ │ │ combobox.css │ │ │ datagrid.css │ │ │ datebox.css │ │ │ dialog.css │ │ │ easyui.css │ │ │ filebox.css │ │ │ layout.css │ │ │ linkbutton.css │ │ │ menu.css │ │ │ menubutton.css │ │ │ messager.css │ │ │ numberbox.css │ │ │ pagination.css │ │ │ panel.css │ │ │ progressbar.css │ │ │ propertygrid.css │ │ │ searchbox.css │ │ │ slider.css │ │ │ spinner.css │ │ │ splitbutton.css │ │ │ tabs.css │ │ │ textbox.css │ │ │ tooltip.css │ │ │ tree.css │ │ │ validatebox.css │ │ │ window.css │ │ │ │ │ └─images │ │ accordion_arrows.png │ │ blank.gif │ │ calendar_arrows.png │ │ combo_arrow.png │ │ datagrid_icons.png │ │ datebox_arrow.png │ │ layout_arrows.png │ │ linkbutton_bg.png │ │ loading.gif │ │ menu_arrows.png │ │ messager_icons.png │ │ pagination_icons.png │ │ panel_tools.png │ │ searchbox_button.png │ │ slider_handle.png │ │ spinner_arrows.png │ │ tabs_icons.png │ │ tree_icons.png │ │ validatebox_warning.png │ │ │ ├─bootstrap │ │ │ accordion.css │ │ │ calendar.css │ │ │ combo.c
Angular项目里怎么使用 jQuery 插件
MZ_的博客
08-10 1836
做项目遇到一个把HTML元素导出pdf的需求，查找资料后找到jQuery.print.js，在一个html页面里测试使用没问题（自己记录的文章）。但是项目使用的是Angular，安装完jquery后可以很方便地使用，但是怎么使用jquery的插件，比如jQuery.print，虽然引入了jquery.js和jQuery.print.js，但是控制台却报错：jquery未定义pr...
利用jquery给指定的table进行添加一行，删除一行的操作
hyq_07_27的博客
09-29 2221
页面如图：点击 + ，增加一行数据，点击- 删除一行数据。 <table id="protypeTable" style="table-layout:fixed" class="tab-1 tab-2" cellspacing="0" cellpadding="0"> <tbody> <tr> <th style="width: 20%;">科目代码</th> <th .
Angular 安装 jquery
小鹰信息技术服务部
06-10 940
2019.6.16 更新：本篇思路不明确，看看这篇吧： https://blog.csdn.net/zhouyingge1104/article/details/92399866 ------------------------------------------------------------------------------------------------------------...
angular引入jquery
03-11
2. 在 angular.json 中配置 jQuery 的路径： ```json "scripts": [ "node_modules/jquery/dist/jquery.min.js" ] ``` 然后在组件中使用 `declare var $: any;` 来声明 `$` 变量即可使用 jQuery。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值