angular操作

最新推荐文章于 2022-11-15 20:32:13 发布
最新推荐文章于 2022-11-15 20:32:13 发布
阅读量189 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshuo_/article/details/82800237
版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            document.addEventListener('plusready', function() {
                //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
            });
        </script>
        <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style>
        h1 {
            color: aliceblue;
            background: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        table {
            width: 100%;
        }
        tr:nth-child(odd){
            background: yellow;
        }tr:nth-child(even){
            background: cyan;
        }
    </style>

    <body ng-app="myApp" ng-controller="myCtrl">
        <h1>购物车</h1>
        <input type="text" placeholder="请输入商品名称" ng-model="mo" />
        <select ng-model="px">
            <option value="price">价格正序</option>
            <option value="-price">价格倒序</option>
            <option value="btime">时间正序</option>
            <option value="-btime">时间倒序</option>
        </select>
        <input type="button" value="入库/增加" ng-click="xs()" />
        <input type="button" value="批量删除" ng-click="alldel()" />
        <div id="div">
            名称<input type="text" ng-model="name" /><br /> 价格
            <input type="text" ng-model="price" /><br /> 产地
            <input type="text" ng-model="product" /><br /> 日期
            <input type="date" ng-model="btime" /><br />
            <input type="button" value="提交" ng-click="add()" />
        </div>
        <div id="div1">
            名称<input type="text" ng-model="name1" /><br /> 价格
            <input type="text" ng-model="price1" /><br /> 产地
            <input type="text" ng-model="product1" /><br /> 日期
            <input type="date" ng-model="btime1" /><br />
            <input type="button" value="提交" ng-click="upd()" />
        </div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td> <input type="checkbox" class="che" ng-click="che()" /> </td>
                <td>商品名称</td>
                <td>价钱</td>
                <td>产地</td>
                <td>上市日期</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="g in ser|filter:mo|orderBy:px">
                <td> <input type="checkbox" class="che" ng-model="g.che" value="{{g.name}}" /> </td>
                <td>{{g.name}}</td>
                <td>{{g.price}}</td>
                <td>{{g.product}}</td>
                <td>{{g.btime}}</td>
                <td>
                    <input type="button" value="删除" ng-click="del(g.name)" />
                    <input type="button" value="修改" ng-click="xg(g)" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            var mo = angular.module("myApp", []);
            mo.controller("myCtrl", function($scope, $http) {
                $http.get("aa.json").then(function(red) {
                    $scope.ser = red.data;
                });
                $("#div1").fadeToggle(false);
                //修改回显
                var  j="";
                $scope.xg = function(g) {
                        $("#div1").fadeToggle(true);
                        var name=g.name;
                        var price=g.price;
                        var product=g.product;
                         var btime=g.btime;
                         j=g.name;
                        $scope.name1=name;
                        $scope.price1=price;
                        $scope.product1=product;
                        $scope.btime1=btime;    
                }
                //修改
                $scope.upd = function(){
                    var name=$scope.name1;
                    var price=$scope.price1;
                    alert(j)
                    var product=$scope.product1;
                    var btime=$scope.btime1;
                    for(var i=$scope.ser.length-1;i>=0;i--){
                        if($scope.ser[i].name==j){
                            $scope.ser[i].name=name;
                            $scope.ser[i].price=price;
                            $scope.ser[i].product=product;
                            $scope.ser[i].btime=btime;
                            alert("修改成功！");
                        }
                    }
                }    
//                //修改
//                $scope.xg = function(j) {
//                    
//                    for(var i =$scope.ser.length-1;i>=0;i--){
//                        if(j==$scope.ser[i].name){
//                        var p=prompt("请输入修改的价格",$scope.ser[i].price)
//                        if(p!=' '||p!=null){
//                            $scope.ser[i].price=p;
//                        }
//                        }
//                    }
//                }

                //批量删除
                $scope.alldel = function() {
                    if(confirm("确定删除？")) {
                        for(var i = $scope.ser.length - 1; i >= 0; i--) {
                            var j = $scope.ser[i];
                            if(j.che) {
                                $scope.ser.splice(i, 1);
                            }
                        }
                    }
                }
                //全选、反选
                $scope.che = function() {
                    for(var i = 0; i <= $scope.ser.length; i++) {
                        if($scope.ser[i].che) {
                            $scope.ser[i].che = false;
                        } else {
                            $scope.ser[i].che = true;
                        }
                    }

                } //单个删除
                $scope.del = function(j) {
                    if(confirm("确定删除？")) {
                        for(var i = 0; i <= $scope.ser.length; i++) {
                            if(j == $scope.ser[i].name) {
                                $scope.ser.splice(i, 1);
                            }
                        }
                    }
                }

                //显示增加
                $("#div").slideToggle(false);
                $scope.xs = function() {
                    $("#div").slideToggle();
                }
                //增加
                $scope.add = function() {
                    //获取表单元素
                    var name = $scope.name;
                    var price = $scope.price;
                    var product = $scope.product;
                    var btime = $scope.btime;
                    if(confirm("确定增加")) {
                        if(btime == ' ' || btime == null) {
                            alert("请选择日期！");
                        }
                        if(name == ' ' || name == null) {
                            alert("请输入姓名！");
                        }
                        if(price == 0 || price == null) {
                            alert("价格不为空不为负！");
                        }
                        if(product == ' ' || product == null) {
                            alert("请输入产地！");
                        }
                        var t = {
                            "name": name,
                            "price": price,
                            "product": product,
                            "btime": btime,
                        };
                        $scope.ser.push(t);
                        $("#div").slideToggle(false);
                    }
                }

            });
        </script>
    </body>

</html>

Fahaxiki丿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Angular操作cookies方法
08-27
Angular 操作 Cookies 方法详解 Angular 作为一个流行的前端框架，提供了强大的 cookies 操作功能。在本文中，我们将详细介绍 Angular 操作 cookies 的方法，包括使用 JavaScript 设置和读取 cookies，以及使用 ...
详解Angular如何正确的操作DOM
08-27
主要介绍了详解Angular如何正确的操作DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js防抖函数
qq_45626867的博客
08-02 210
实现 function handle(data) { console.log('防抖：',data); } var canRun = true; function throttle(data,delay) { // 通过闭包保存一个标记 return function () { // 在函数开头判断标记是否为true，不为true则return if (!canRun) {
构建一个WIFI室内定位系统
最新发布
11-15 3808
室内定位可以应用在很多场景，由于受到室内环境的限制，GPS信号无法有效的接收，这时可以利用室内的WIFI热点提供的信号强度来进行辅助定位。通常在室内都会有很多的WIFI热点，我们可以把室内的区域划分为多个网格，在每一个网格测量所接收到的WIFI热点的信号强度，根据这些信息来建立一个WIFI信号指纹库，以后我们就可以通过比对指纹库，来确定在室内的位置了。
Native.js 原生方法-弹出对话框
qq_31971935的博客
09-08 749
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>提示框</title> <scr
mui使用技巧
weixin_34345753的博客
06-23 103
1、document.addEventListener('plusready', function(){ 　　//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。" }); 2、 所有的内容应该写在 #mui-content 的部分，不然会出现错位，因为mui的框架自身带有一些header的position 3、...
混合开发基础
欣欣博客
12-20 2490
1.混合开发的解决方案 方案一：dcloud(hbuilder)国内一款通用的框架，性能比phonegap高 方案二：phonegap（Adobe公司所出的将phonegap捐献给了Apache）,cordova最经典的一款混合开发的框架 方案三：APICloud 编写都是在本地 打包在云端 方案四：react native 国外比较火 方案五：WEX5 方案六：微信里面做混合开发 2.混合开发原理
angular分页指令操作
12-29
目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下： index.html <body id=sBill ng-controller=map_ctrl> ...input type=radio n
Angular4.0动画操作实例详解
10-17
本篇文章将深入探讨Angular4.0动画操作的原理、定义和使用方法，通过实例来帮助理解。 首先，引入动画功能需要在`app.module.ts`中导入`BrowserAnimationsModule`。这是Angular提供的核心模块，用于支持动画功能。...
监听手机app返回按钮执行后退
u013373006的博客
09-13 1677
document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。" var w = plus.webview.create('https://www.xxxxxxxx.cn/?d=we'); ...
模拟san
jjt_cmdn的博客
09-16 327
document.addEventListener('plusready', function(){**重点内容** 列表内容 //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。" }); *{ ...
AngularJs 购物车
weixin_43143580的博客
09-19 180
&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;script src="js/angularjs1.4.js" type=&quo
vue的get 和set
热门推荐
王依米
05-15 1万+
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;    &l
默认文档解析--手机web app开发笔记（二）
weixin_30667301的博客
07-21 147
首先我们启动HBuilderX2.0 ，界面如图2-1所示 图2-1 软件开发界面 单击“文件—新建—项目”，弹出新建项目管理界面，我们在里面进行了项目类型选择“5+APP”、项目名称填写“编程之路”、设置文件存放路径和模板选择“默认模板”，点击创建，我们的新建项目就OK了，如图2-2所示。 图2-2 新建项目设置 这样我们的开发目录基本建立起来了，主要包括4个文件夹和2...
第十二周学习周记——AJAX和天气预报
cjy1602的博客
06-18 387
第十二周学习周记AJAX和天气预报前言一、二、添加Jquery事件、方法三、HTML主体部分总结 前言 上一周我们初步学习了AJAX的概念，这一周我们可以利用AJAX接上网上的天气预报接口，尝试着做一个天气预报界面 一、 首先我们需要输入 document.addEventListener('plusready', function(){}); 所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。 二、添加Jquery事件、方法 代码如下： $(docume
Dcloud开发引用第三方sdk的app小程序扫盲---Native.js
EK306的博客
12-05 2093
Native.js技术，简称NJS，是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。刚开始接触h5 的app的时候，我还在想这h5 无非是css+js+html标记  他怎么就能变身成app了呢。android里面那么多要引入的包 他是怎么解决的呀。。。看了官方的文档和案例后眼见大开。官方文档有相应的介绍还有实例代码可以看。废话不多说，举个栗子：写个app获取手机w
H5 移动APP - 面包店
weixin_30381793的博客
01-11 169
使用jquerymobile、html5、css3实现移动APP 流程图 打包 用hbuilder实现打包 效果截图展示 图2-1 APP图标 图2-2 主页 图2-3 面包列表&详细信息 图2-4 订购 图2-5 生成&查看订单 图2-6 删除订单 图2-7 分店列表&详细信息 图2-8 定位系统 主要代码 index.html <!...
Angular 2入门指南
在HTML容器中嵌入Angular 2应用，并通过服务器提供示例代码，以便进行实际操作和测试。 此外，书中还提到了各种集成开发环境(IDE)的使用，如Sublime Text 3、Atom、Visual Studio Code和WebStorm，以及如何利用Gulp...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值