文档章节

AngularJs心得

管温饱的老徐
 管温饱的老徐
发布于 2017/08/24 11:50
字数 410
阅读 3
收藏 0

<i><%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path + "/";
    %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'Goods.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<link rel="stylesheet"
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
    src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angularjs.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    var app = angular.module("myapp", []);
    //进来就查询所有商品
    app.controller("myController", function($scope, $http) {
        $http.post("GoodsController/findGoods").success(function(obj) {

            $scope.product = obj;
        });

        //点击减的按钮减1
        $scope.jian = function(index) {
            var id = $scope.product[index].id;

            $http.post("GoodsController/jian?id=" + id).success(
                    --$scope.product[index].account);
        };
        //点击加的按钮减1
        $scope.jia = function(index) {
            var id = $scope.product[index].id;

            $http.post("GoodsController/jia?id=" + id).success(
                    ++$scope.product[index].account);
        };

        //点击删除的按钮删除
        $scope.del = function(index) {
            var id = $scope.product[index].id;

            if (confirm("确认删除?")) {
                $http.post("GoodsController/Del?id=" + id).success(function() {
                    alert("删除成功");
                    location.reload();
                });
            }
        };

//点击输入框输入修改值数据库进行修改

        $scope.update = function(index) {
            var id = $scope.product[index].id;
            var account = $scope.product[index].account;
            alert(id);
            alert(account);
            $http.post("GoodsController/updateGoods?id=" + id + "&account="
                    + account);
        };

    });
</script>

 

</head>

<body ng-app="myapp">
    <div class="container" ng-controller="myController">
        <h1>欢迎进入购物车</h1>

        <table>
            <tr>
                <td><input type="checkbox"></td>
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>购买数量</td>
                <td>操作</td>

            </tr>

            <tr ng-repeat="p in product">
                <td><input type="checkbox" value="{{p.id}}"></td>
                <td>{{p.id}}</td>
                <td>{{p.goodsname}}</td>
                <td>{{p.price}}</td>

                <td>
                    <button class=" btn btn-success" value="{{p.id}}"
                        ng-click="jia($index)">+</button>
                        <input type="text"  ng-model="p.account" style="width: 30" value="{{p.account}}" ng-blur="update($index)">
                    
                    <button class=" btn btn-success" value="{{p.id}}"
                        ng-click="jian($index)">-</button>
                </td>
                <td><button class=" btn " ng-click="del($index)">删除</button></td>

            </tr>
        </table>

    </div>
</body>
    </html> </i>

© 著作权归作者所有

共有 人打赏支持
管温饱的老徐
粉丝 0
博文 10
码字总数 1678
作品 0
呼伦贝尔
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 索引 explain索引分析优化

EXPLAIN是MySQL提供的工具,可用于模拟优化器执行SQL查询语句,从而知道MySQL是如何处理SQL语句的,包括表的读取顺序、数据读取操作的操作类型、可能使用的索引、实际使用的索引、表之间的引...

PeakFang-BOK
2分钟前
0
0
17-《深度拆解JVM》之即时编译(上)

一、问题引入 在第一篇中,我们简单了解过即时编译。这是一项用来提升应用程序运行效率的技术。通常而言,代码会先被 Java 虚拟机解释执行,之后反复执行的热点代码则会被即时编译成为机器码...

飞鱼说编程
2分钟前
0
0
OSChina 周二乱弹 —— 请上车吧

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @2amor :分享王菲的单曲《闷》 《闷》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) @開源中國周杰倫 :昨天睡觉肚子疼,妈蛋,半夜爬起来...

小小编辑
51分钟前
432
9
工作中如何做好技术积累

参考:https://tech.meituan.com/study_vs_work.html 看了这篇文章,觉得总结得非常好,因此摘抄了一些关键点,以便自己经常翻阅。 引言 在繁忙的工作中做好技术积累,构建个人核心竞争力. 在...

grace_233
今天
8
0
Mariadb二进制包安装,Apache安装

安装mariadb 下载二进制包并解压 [root@test-a src]# wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/mariadb-10.2.6-linux-glibc_214-x86_64.t......

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部