Month3

本文介绍了一个使用AngularJS实现的订单管理系统,该系统具备增删查改订单的基本功能,并支持商品名、手机号及订单状态的过滤查询,同时实现了表格数据的排序功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Month模拟4</title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
table tr:nth-child(odd){
background: grey;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("kongzhiqi",["$scope",function($scope){

$scope.users=[
{state: false,id:2001,spname:"iPoneX",name:"张三",phone:135565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),zhuangtai:"已发货"},
{state: false,id:3006,spname:"iPone6",name:"网红",phone:185324588,price:5635,city:"郑州",time:new Date('11-23 11:38:20'),zhuangtai:"已发货"},
{state: false,id:5312,spname:"iPone7",name:"赵小龙",phone:175455858,price:6180,city:"北京",time:new Date('11-20 09:17:30'),zhuangtai:"未发货"},
{state: false,id:2132,spname:"iPone8",name:"赵强",phone:176255656,price:7190,city:"上海",time:new Date('11-23 10:40:21'),zhuangtai:"未发货"}
];

//全选的操作
$scope.ckAll = function() {
for(var i in $scope.users) {
$scope.users[i].state = $scope.ckall;
}
}

$scope.del=function(){
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state){
$scope.users.splice(i,1);
i--;  //让下个值从删除的索引开始
}
}
}

//排序
           $scope.orderID = function (desc, od) {
               $scope.order = 'iden';
           }
           $scope.orderPrice = function (desc, od) {
               $scope.order = 'price';
           }
           $scope.orderTime = function (desc, od) {
               $scope.order = 'downtime';
           }


$scope.q1=false;
$scope.q2=false;
$scope.q3=false;
$scope.q4=false;
$scope.q5=false;
$scope.q1_1=false;
$scope.q1_2=false;
$scope.q1_3=false;
$scope.q1_4=false;
$scope.q6=false;
$scope.q1_6=false;

$scope.add=function(){
//商品名验证
if($scope.uspname==null||$scope.uspname==""){
$scope.q1=true;
}else{
if($scope.uspname.length<=6||$scope.uspname.length>=10){
$scope.q1_1=true;
}
$scope.q1=false;
}

//用户名验证
if($scope.uname==null||$scope.uname==""){
$scope.q2=true;
}else{
if($scope.uname.length<=4||$scope.uname.length>=10){
$scope.q1_2=true;
}
$scope.q2=false;
}

//手机号验证
if($scope.uphone==null||$scope.uphone==""){
$scope.q3=true;
}else{
if(!$scope.uphone.length==11){
$scope.q1_3=true;
}
$scope.q3=false;
}


//id验证
if($scope.uid==null||$scope.uid==""){
$scope.q6=true;
}else{
if(!$scope.uid.length==11){
$scope.q1_6=true;
}
$scope.q6=false;
}

//价格验证
if($scope.uprice==null||$scope.uprice==""){
$scope.q4=true;
}else{
$scope.q4=false;
}

if($scope.ucity==null||$scope.ucoty==""){
$scope.q5=true;
}else{
$scope.q5=false;
}

if(!$scope.q1  &&  !$scope.q1_1  &&  !$scope.q2  &&  !$scope.q1_2  &&  !$scope.q3&&  !$scope.q1_3&&  !$scope.q4&&  !$scope.q1_4&&  !$scope.q5){
$scope.add=function(){
var uid=$scope.uid;
var uspname=$scope.uspname;
var uname=$scope.uname;
var uphone=$scope.uphone;
var uprice=$scope.uprice;
var ucity=$scope.ucity;
var utime=new Date;
$scope.users.push(
{id:uid,spname:uspname,name:uname,phone:uphone,price:uprice,city:ucity,time:utime,zhuangtai:"未发货"}
);
}
}

}


}]);
</script>

</head>
<body ng-app="myapp" ng-controller="kongzhiqi">
<button style="background: dodgerblue;" ng-click="toadd=true">新增订单</button>&nbsp;&nbsp;
<button style="background: dodgerblue;" ng-click="del()">批量删除</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" placeholder="按商品名查询" ng-model="spname1"/>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" placeholder="按手机号查询" ng-model="phone1"/>&nbsp;&nbsp;&nbsp;&nbsp;
<select  ng-model="zhuangtai1">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>

<br><br>

<table border="1px soild">
<tr>
<td>
<input type="checkbox"  ng-model="ckall" ng-click="ckAll()"/>
</td>
<td>
id
<button ng-click="orderID(desc=!desc)">排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格
<button ng-click="orderPrice(desc=!desc)">排序</button>
</td>
<td>城市</td>
<td>
下单时间
<button ng-click="orderTime(desc=!desc)">排序</button>
</td>
<td>状态</td>
</tr>
<tr ng-repeat="u in users|filter:{spname:spname1,phone:phone1,zhuangtai:zhuangtai1}|orderBy:idpx">
<td>
<input type="checkbox" ng-model="u.state" />
</td>
<td>{{u.id}}</td>
<td>{{u.spname}}</td>
<td>{{u.name}}</td>
<td>{{u.phone}}</td>
<td>{{u.price|currency:"¥"}}</td>
<td>{{u.city}}</td>
<td>{{u.time|date:'MM-dd hh:mm:ss'}}</td>
<td>
<a href="#" style="background: yellow;" ng-show="u.zhuangtai == '未发货'" ng-click="u.zhuangtai = '已发货'">
未发货</a>
<span style="background: green;" ng-show="u.zhuangtai == '已发货'">{{u.zhuangtai}}</span>
</td>
</tr>
</table>

<br><br><br><hr/>

<span style="margin-left: 100px;">新增订单</span><br><br>
<form ng-show="toadd">

id  <input type="text" ng-model="uid" placeholder="请输入id">
 <span style="background: yellow;" ng-show="q6">id不能为空</span>
 <span style="background: yellow;" ng-show="q1_6">id必须是纯数字</span><br>

商品名  <input type="text" ng-model="uspname" placeholder="请输入6-10个字符的商品名">
 <span style="background: yellow;" ng-show="q1">商品不能为空</span>
 <span style="background: yellow;" ng-show="q1_1">商品名必须是6-10个字符</span><br>
 
用户名  <input type="text" ng-model="uname" placeholder="请输入4-10个字符的用户名">
 <span style="background: yellow;" ng-show="q2">用户名不能为空</span>
 <span style="background: yellow;" ng-show="q1_2">用户名必须是4-10个字符</span><br>
 
手机号  <input type="text" ng-model="uphone" placeholder="请输入11个字符的手机号">
 <span style="background: yellow;" ng-show="q3">手机号不能为空</span>
 <span style="background: yellow;" ng-show="q1_3">长度必须等于11</span><br>
 
价格为  <input type="text" ng-model="uprice" placeholder="必须是纯数字">
 <span style="background: yellow;" ng-show="q4">价格不能为空</span>
 <span style="background: yellow;" ng-show="q1_4">价格必须是纯数字</span><br>
 
城市 &nbsp;&nbsp;&nbsp;
 <select ng-model="ucity">
<option>北京</option>
<option>郑州</option>
<option>上海</option>
<option>深圳</option>
 </select>
 <span style="background: yellow;" ng-show="q5">请选择城市</span><br><br>
 
<button style="margin-left: 100px;" ng-click="add()">保存</button>
</form>
</body>
</html>
<think>题目要求:将提供的中文键值对转换为英文,其中月份要使用缩写。给定的对象包含日期时间选择器的相关文案。我们将创建一个新的对象,将每个中文值翻译成对应的英文值,注意月份缩写(如Jan,Feb等)和周几的缩写(如Sun,Mon等)。根据要求:1.基本翻译:如“此刻”->"Now",“今天”->"Today"等。2.月份:要求用缩写,对应英文月份缩写为:Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec。3.周几:要求用缩写,对应为:Sun,Mon,Tue,Wed,Thu,Fri,Sat。注意:给定的对象中,有两个部分包含月份:-直接以month1到month12的键,对应的值是数字月份加上“月”字,如“1月”->我们只需要数字部分加上对应月份缩写,但注意原字符串有空格,我们不要空格,直接写成数字+空格+月份缩写?但要求是英文,所以这里我们直接翻译成英文月份缩写,不需要数字。但是观察原键值,从month1到month12分别对应1月到12月,所以我们只需要将值替换为对应的月份缩写,不需要数字。因为原键已经是month1到month12,通常在使用时,我们只需要显示月份名称,所以直接翻译成缩写即可。-还有months对象,里面是完整的月份名称,如“一月”->"January",但要求用缩写,所以也要替换成缩写。然而,给定的对象中还有weeks对象,里面是周几的完整中文(如“日”,“一”等),要求替换成英文缩写(如Sun,Mon等)。具体步骤:1.基本键值对翻译(非嵌套对象部分):now:"此刻"->"Now"today:"今天"->"Today"cancel:"取消"->"Cancel"clear:"清空"->"Clear"confirm:"确定"->"Confirm"selectDate:"选择日期"->"SelectDate"selectTime:"选择时间"->"SelectTime"startDate:"开始日期"->"StartDate"startTime:"开始时间"->"StartTime"endDate:"结束日期"->"EndDate"endTime:"结束时间"->"EndTime"prevYear:"前一年"->"PreviousYear"nextYear:"后一年"->"NextYear"prevMonth:"上个月"->"PreviousMonth"nextMonth:"下个月"->"NextMonth"year:"年"->"Year"2.处理月份数字(month1到month12):month1:"1月"->我们这里要变成英文缩写,所以month1:"Jan"month2:"2月"->"Feb"...一直到month12:"Dec"3.处理weeks对象:weeks:{sun:"日"->"Sun"mon:"一"->"Mon"tue:"二"->"Tue"wed:"三"->"Wed"thu:"四"->"Thu"fri:"五"->"Fri"sat:"六"->"Sat"}4.处理months对象(注意这里要求也是缩写):months:{jan:"一月"->"Jan"feb:"二月"->"Feb"mar:"三月"->"Mar"apr:"四月"->"Apr"may:"五月"->"May"jun:"六月"->"Jun"jul:"七月"->"Jul"aug:"八月"->"Aug"sep:"九月"->"Sep"oct:"十月"->"Oct"nov:"十一月"->"Nov"dec:"十二月"->"Dec"}注意:months对象中的键已经是英文缩写了,只是值需要替换。所以我们可以直接修改值。由于这是一个对象,我们可以创建一个新的对象,也可以在原对象上修改。这里我们创建一个新的对象,用JavaScript对象字面量表示。但是注意,给定的数据中,months对象里的键是月份英文的缩写(小写),而我们要的值也是月份的英文缩写(通常首字母大写,但也可以小写,根据需求。通常日期控件使用首字母大写)。这里我们按照常见的首字母大写(如Jan)来写。然而,原数据中的weeks对象的值是中文,我们也要替换。我们按照上述要求构建新的对象。</think> 以下是满足要求的代码实现,将中文替换为英文,月份使用缩写: ```javascript const translations = { now: "Now", today: "Today", cancel: "Cancel", clear: "Clear", confirm: "Confirm", selectDate: "Select date", selectTime: "Select time", startDate: "Start date", startTime: "Start time", endDate: "End date", endTime: "End time", prevYear: "Previous year", nextYear: "Next year", prevMonth: "Previous month", nextMonth: "Next month", year: "Year", month1: "Jan", month2: "Feb", month3: "Mar", month4: "Apr", month5: "May", month6: "Jun", month7: "Jul", month8: "Aug", month9: "Sep", month10: "Oct", month11: "Nov", month12: "Dec", weeks: { sun: "Sun", mon: "Mon", tue: "Tue", wed: "Wed", thu: "Thu", fri: "Fri", sat: "Sat" }, months: { jan: "Jan", feb: "Feb", mar: "Mar", apr: "Apr", may: "May", jun: "Jun", jul: "Jul", aug: "Aug", sep: "Sep", oct: "Oct", nov: "Nov", dec: "Dec" } }; ``` ### 代码解释: 1. **基本翻译**: - 直接替换基本术语:如"取消"→"Cancel","确定"→"Confirm"等 - 保持原有键名不变,只修改值 2. **月份处理**: - `month1`到`month12`对应简写:Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec - `months`对象内的值同样使用简写格式 - 遵循标准月份缩写规范(3字母全大写首字母) 3. **星期处理**: - `weeks`对象使用标准的周日~周六简写 - 对应关系:日→Sun, 一→Mon, 二→Tue 等 - 保持原有键名(sun-sat)不变 4. **命名规范**: - 使用驼峰式大小写(如"Select date") - 所有术语首字母大写 - 日期时间格式符合国际标准 5. **嵌套结构**: - 保持原始的嵌套对象结构(weeks/months) - 内部键名保持不变(sun/mon... jan/feb...)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值