angularjs的发货,已发货切换

最新推荐文章于 2022-12-09 16:14:24 发布
最新推荐文章于 2022-12-09 16:14:24 发布
阅读量175 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_mysunshine/article/details/78341182
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式-->
    <style>
        td,th{
            width: 120px;
            height: 60px;
            border: 1px solid #69717d;
        }
        table{
            border-collapse: collapse;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .but{
            margin-top: 6px;
            margin-bottom: 6px;
            background: #0a9dc7;
        }
        .red{
            border: 1px solid red;
        }
    </style>
    <!--导入angular包-->
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        /*声明模块*/
        var myapp=angular.module("myapp",[]);
        /*为模块添加控制器*/
        myapp.controller("myCtrl",function ($scope) {
            /*创建数组*/
            $scope.items=[
                {
                  done:false,
                   "id":1,
                    "sname":"小米",
                    "yname":"张三",
                    "phone":111111,
                    "price":1000,
                    "city":"北京",
                    "times":3,
                    "ztai":"发货"
                },
                {
                    done:false,
                    "id":2,
                    "sname":"苹果",
                    "yname":"李四",
                    "phone":222222,
                    "price":2000,
                    "city":"上海",
                    "times":5,
                    "ztai":"发货"
                },
                {
                    done:false,
                    "id":3,
                    "sname":"小米",
                    "yname":"王五",
                    "phone":333333,
                    "price":3000,
                    "city":"重庆",
                    "times":7,
                    "ztai":"已发货"
                },
                {
                    done:false,
                    "id":4,
                    "sname":"三星",
                    "yname":"赵六",
                    "phone":444444,
                    "price":4000,
                    "city":"天津",
                    "times":9,
                    "ztai":"已发货"
                }
            ]
            /*城市选择 查询*/
            $scope.citySSS="城市选择";
            /*注意传值*/
            $scope.citySize=function (item) {
                //console.log(item);
                if($scope.citySSS!="城市选择"){
                    if(item.city==$scope.citySSS){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            }
            /*城市 状态选择 查询*/
            $scope.ztaiSSS="状态选择";
            /*注意传值*/
            $scope.ztaiSize=function (item) {
                //console.log(item);
                if($scope.ztaiSSS!="状态选择"){
                    if(item.ztai==$scope.ztaiSSS){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }
            }
            /*开始月份 查询*/
            $scope.timesSize="开始月份";
            /*注意传值*/
            $scope.timesFilter=function(item){
                if($scope.timesSize!="开始月份"){
                    var timesSize=$scope.timesSize;
                    var timesArr=timesSize.split("-");
                    var min=timesArr[0];
                    var max=timesArr[1];
                    var times=item.times;
                    if(times>max||times<min){
                        return false
                    }else{
                        return true;
                    }
                }else{
                    return true;
                }

            };
            /*显示隐藏*/
            $scope.xian=false;
            /*显示订单方法*/
            $scope.showall=function () {
                /*显示*/
                $scope.xian=true;
            }
            /*添加新数据方法，隐藏订单*/
            $scope.additem=function () {
                /*循环，判断*/
                for(var i=0;i<$scope.items.length;i++){
                    if($scope.sname==$scope.items[i].sname&&$scope.yname==$scope.items[i].yname&&$scope.phone==$scope.items[i].phone&&$scope.city==$scope.items[i].city){
                        alert("订单填写重复");
                        return;
                    }
                    if($scope.sname==null||$scope.yname==null||$scope.phone.length<8||$scope.phone.length>12||$scope.city==null){
                       /* alert("请填写商品名，请填写用户名，手机号为8-12位，请填写城市");*/
                       alert("请填写完整")
                        return;
                    }
                }
/*添加*/
                $scope.items.push({'id':"0",'sname':$scope.sname,'yname':$scope.yname,'phone':$scope.phone,'price':"999",'city':$scope.city,'times':"6",'ztai':"发货"});
                /*隐藏*/
                $scope.xian=false;
            }
            /*全选*/
            $scope.checkall=function () {
                if ($scope.check1 == true) {
                    for (var i = 0; i < $scope.items.length; i++) {
                        $scope.items[i].done = true;
                    }
                }
                else {
                    for (var i = 0; i < $scope.items.length; i++) {
                        $scope.items[i].done = false;
                    }
                }
            }
            /*反选*/
            var n=0;
            $scope.fx=function (index) {
                if($scope.items[index].done==true){
                    n++;
                }else{
                    n--;
                }
                if(n==$scope.items.length){
                    $scope.check1=true;
                }else {
                    $scope.check1=false;
                }
            }
            /*默认正序排序，*/
            $scope.revers=false;
            /*默认按name排序*/
            $scope.sortColumn="id";
            /*排序*/
            $scope.sort=function (Column) {
                /*如果按变量Column排序*/
                if($scope.sortColumn==Column){
                    /*点击age排序，默认正序排序，再次点击age,倒叙排序*/
                    $scope.revers=!$scope.revers;
                }
                /*变量赋值给常量*/
                $scope.sortColumn=Column;
            };
            /*点击切换*/
            $scope.yfh="已发货"
            $scope.fun=function (index) {
                if($scope.items[index].ztai=="发货"){
                    $scope.items[index].ztai=$scope.yfh;
                }
            }
        })
    </script>
</head>
<!--ng-app="myapp" ng-controller="myCtrl"-->
<body ng-app="myapp" ng-controller="myCtrl">
<!--模糊查询-->
<input type="text" placeholder="用户名搜索" ng-model="cz">
<input type="text" placeholder="手机号搜索" ng-model="czs">
<!--绑定ng-model="citySSS，点击事件方法在遍历里过滤-->
<select  ng-model="citySSS">
    <option>城市选择</option>
    <option>北京</option>
    <option>上海</option>
    <option>重庆</option>
    <option>天津</option>
</select>
<!--绑定ng-model="ztaiSSS，点击事件方法在遍历里过滤-->
<select ng-model="ztaiSSS">
    <option>状态选择</option>
    <option>发货</option>
    <option>已发货</option>
</select>
<!--绑定ng-model="timesSize，点击事件方法在遍历里过滤-->
<select ng-model="timesSize">
    <option>开始月份</option>
    <option>1-3</option>
    <option>4-6</option>
    <option>7-9</option>
    <option>10-12</option>
</select>

<select>
    <option>结束月份</option>
    <option>1-3</option>
    <option>4-6</option>
    <option>7-9</option>
    <option>10-12</option>
</select><br>
<!--点击 新增订单 按钮,显示订单-->
<button class="but" ng-click="showall()">新增订单</button>
<button class="but">批量发货</button><br>
<!--订单div,ng-show="xian"-->
<div ng-show="xian">
<h3>新增订单</h3>
    商品名：<input type="text" placeholder="请填写商品" ng-model="sname" ng-class="{red:check}"><br>
    用户名：<input type="text" placeholder="请填写用户名" ng-model="yname" ng-class="{red:check}"><br>
    手机号：<input type="text" placeholder="手机号为8-12位" ng-model="phone" ng-class="{red:check}"><br>
    <!--ng-model="city"-->
    城市选择：<select ng-model="city">
        <option>北京</option>
        <option>上海</option>
        <option>重庆</option>
        <option>天津</option>
    </select><br>
    <!--点击 提交按钮,隐藏订单，-->
    <button class="but" ng-click="additem()">提交</button>
</div>
<table>
    <tr>
        <!--ng-click="checkall()" ng-model="check1"-->
        <th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>
        <!--点击事件 排序方法 按照参数排序-->
        <th>ID<button ng-click="sort('id')">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格<button ng-click="sort('price')">排序</button></th>
        <th>城市</th>
        <th>下单时间<button ng-click="sort('times')">排序</button></th>
        <th>状态</th>
    </tr>
    <!--遍历，过滤-->
    <tr ng-repeat="item in items|filter:{yname:cz}|filter:{phone:czs}|filter:citySize|filter:ztaiSize|filter:timesFilter|orderBy:sortColumn:revers">
        <!--ng-model="item.done" ng-click="fx($index)"-->
        <td><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></td>
        <td>{{item.id}}</td>
        <td>{{item.sname}}</td>
        <td>{{item.yname}}</td>
        <td>{{item.phone}}</td>
        <td>{{item.price}}</td>
        <td>{{item.city}}</td>
        <td>{{item.times}}</td>
        <!--切换方法-->
        <td ng-click="fun($index)">{{item.ztai}}</td>
    </tr>
</table>
</body>
</html>
love_mysunshine
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular语法基础
m0_46684624的博客
09-08 669
一，Angular环境搭建 1.安装前准备工作 node npm install -g @angular/cli 2.创建项目 ng new 项目名称 如果要跳过npm i安装 ng new angulardemo --skip-install 3.运行项目 cd angulardemo ng serve --open src目录解析 app 组件和根模块 assets 静态资源文件 browerslist 支持浏览器 favicon_ico 图标 【node_modules 】 第三方依赖包存放
AngularJS路由切换实现方法分析
10-20
在本文中，我们将深入探讨AngularJS中的路由切换实现方法，通过具体的实例来理解其工作原理和操作技巧。 1. **引入依赖库** 实现AngularJS路由切换，首先要确保引入了AngularJS的核心库`angular.min.js`和路由插件...
angularjs增删查,排序,发货
L59_1的博客
12-20 218
angularjs增删查,排序,点击未发货按钮改变按钮颜色,并且变为已发货,批量删除已发货数据,按商品内容,手机号查询数据,按发货状态查询已发货数据和未发货数据<title></title> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <sc
Angularjs学习笔记
瓜皮伦的博客
12-09 283
​ 先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
Angularjs之国际化
weixin_33905756的博客
07-13 109
Angularjs国际化 公司需要开发一个供应商后台系统，从github上找了一套模板INSPINIA,前端UI用Bootstrap,框架用的Angularjs。使用Angular是因为Angularjs是一个完善的前端MVC框架，包含带有丰富指令的模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。而且github上有很...
angularjs2学习教程
xizi2002的专栏
03-31 1797
WhyAngular2 Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？ 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的提升已经非常困难了。 快速变化的WEB 在语言方面，ECMAScript
手机淘宝列表页面 的js调用展示
热门推荐
04-08 1万+
手机淘宝列表页面 的js调用展示 http://www.lxway.com/814960451.htm 手机淘宝列表页面 的js调用展示  http://api.m.taobao.com/h5/com.taobao.search.api.getshopitemlist/2.0/?v=2.0&api=com.taobao.search
初学VUE&组件
dream_as_horse的博客
04-25 246
vue router：用来做路由 vuex：用来管理 mvvm：model-view-viewmodel v-for：指令 cdn：内容分发网络 Object.defineProperty(对象名，‘x’，操作对象)：在一个对象上定义或修改新的值 操作对象中的get方法在调用obj.x时会自动执行，set方法在obj.x = 来赋值时会自动执行 特性检测： 检测是否支持圆角和placehold...
传智品优购
dapaogez1的博客
03-17 559
由于品优购项目内容很多，这里只简单的介绍知识内容和做项目过程中遇到的问题，以及解决方案。品优购中涉及的具体技术，我在其他地方有详细的整理。限于文章篇幅不能全部写出。
面试：第三章：中级综合
Java程序员廖志伟
03-21 1691
SSM框架面试问题 讲下springmvc框架的工作流程 1、用户向服务器发送请求，请求被SpringMVC的前端控制器DispatcherServlet截获。 2、DispatcherServlet对请求的URL（统一资源定位符）进行解析，得到URI(请求资源标识符)，然后根据该URI，调用HandlerMapping获得该Handler配置的所有相关的对象，包括Handler对象以及Ha...
AngularJS入门教程之多视图切换用法示例
10-21
主要介绍了AngularJS多视图切换用法,结合实例形式分析了AngularJS基于多视图切换实现碎片文件动态载入的相关操作技巧,需要的朋友可以参考下
AngularJS实现动态切换样式的方法分析
10-18
主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下
AngularJS实现使用路由切换视图的方法
10-20
在AngularJS中，路由是实现页面视图动态切换的关键机制，允许用户在不刷新整个页面的情况下，根据URL路径加载不同的视图内容。本教程通过一个学生信息管理系统的例子，详细阐述了如何使用AngularJS的路由功能来切换...
使用AngularJS2中的指令实现按钮的切换效果
10-20
主要介绍了使用AngularJS2中的指令实现按钮的切换效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
开题报告电影票订票APP的设计与实现 已通过开题答辩的.doc
07-30
近些年的电影在人们文娱活动中占据重要地位，另外，由于人们的生活越来越富有，越来越多的人们不再选择在家里看电影，而是选择去电影院看电影。但是，以往的售票方式是需要工作人员一张张的录入到账户薄中的，这一模式已不再适应现在的实际情况，因为手动的操作不仅繁琐还容易存在差错。随着电子商务的发展，网络购票已经成为一种趋势，电子影票也已经慢慢走入人们的生活。目前，网票网作为国内首家全国性的网上选座购买电影票平台完全实现网上/手机查看影讯、自助选座、网银支付、自助验票全自助化营运模式。
Magene_C506_1722330141_905661_1722351868.fit
最新发布
07-30
Magene_C506_1722330141_905661_1722351868.fit
麻雀搜索算法SSA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5631.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
开题报告 二手手机收售系统【答辩高分内容】.doc
07-30
当换手机变成如“女人换衣服”般的容易，你被换下的那款二手手机究竟流向何处，才能释放其最大经济价值？某环保组织曾批露一组数据——每年，中国都会产生230万吨电子垃圾，仅次于美国的300万吨，是世界第二大电子垃圾生产国，并且还以年均20％的速度增加。另外据不完全统计，目前全国仅闲置手机就有10亿多部，并且每年新增3至5亿部。机遇与危机并存 据统计，我国手机用户数量现已达11．46亿。仅去年一年，全国就销售4．25亿部新手机，同时有近4亿部手机被淘汰。在这个手机更新换代比眨眼还快的年代，我国旧手机的回收和无害化处理措施却没能跟上，不少淘汰下来的旧手机都面临“无处可去”的尴尬。
angularjs tab样式按钮切换 背景切换
05-25
可以通过添加/删除 CSS 类来切换样式，并使用 ngClass 指令绑定到相应的按钮。 首先，在 HTML 中定义按钮： ```html [ngClass]="{'active': activeTab === 'tab1'}">Tab 1 [ngClass]="{'active': activeTab === '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值