angular的实现商品信息的增 删 查

最新推荐文章于 2022-07-15 10:37:12 发布
最新推荐文章于 2022-07-15 10:37:12 发布
阅读量433 收藏
点赞数 2
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou__9468/article/details/78341408
版权

一.实现要求



1、         完成页面（30分）

2、         点击“新增订单”，弹出上框，新增订单状态都是“待发货”

3、         每个排序5分

4、         提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色（错误提示：10分，提交成功：5分）

5、         选择状态查询：待发货、已发货、已收货（5分）

6、         点击“发货”按钮，将“待发货”状态改成“已发货”（10分）

7、         通过Checkbox全选和全不选（5分）

8、         点击“批量删除”按钮，删除选中的订单（10分）

9、         选择“开始月份”：01~12

10、     选择“结束月份”：01~12，查询开始月份和结束月份之间的订单（10分）

二.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>练习</title>
    <style>
        *{
            margin: 10px auto;
        }
        .even_cls {
            background-color: #fff;
        }
        .odd_cls {
            background-color: #cccccc;
        }
        table{
            width: 1095px;
            height: 50px;
        }
        td, th {
            border: 1px solid gainsboro;
            text-align: center;
        }

        button {
            width: 100px;
            height: 40px;
            background: #087E08;
            color: white;
            border: 0px;
            border-radius: 5px;
        }
        .search {
            width: 1083px;
            height: 50px;
            line-height: 50px;
            margin-bottom: 10px;
        }


        .search input {
            width: 230px;
            height: 25px;
            color: #999;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid gainsboro;
        }
        .search select{
            width: 100px;
            height: 26px;
            border: 1px solid #999;
            border-radius: 4px;
            margin-left: 10px;
        }
        .search1{
            width: 1083px;
            height: 50px;
            line-height: 50px;
            margin-bottom: 10px;
        }
        .search1 button {
            background: #087E08;
        }
        .form {
            width: 600px;
            border: 1px solid #999;
            margin: 0 auto;
        }
        h3{
            margin-left: 20px;
        }
        .form .label {
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: end;
        }
        .form input {
            width: 312px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }
        .form .txt {
            display: block;
            float: left;
            width: 340px;
            height: 40px;
            line-height: 40px;
            padding-left: 16px;
        }
        .form button {
            width: 56px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .form .errTips {
            width: 226px;
            background-color: lightpink;
            color: darkred;
            border-radius: 4px;
            margin-left: 96px;
            margin-top: 6px;
            margin-bottom: 4px;
            padding: 16px 48px;
        }
        .form select {
            width: 84px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }
        .btn{
            width: 45px;
            height: 25px;
            text-align: center;
        }
        .btn1{
            width: 40px;
            height: 25px;
            text-align: center;
        }
        .btn2{
            width: 86px;
            height: 30px;
            text-align: center;
        }

        .active {
            color: red;
        }

    </style>
    <script>
        var flag=false;
        var data =
                [
                    {"id": 1, "phone_name": 'iPhone4',"name":'张三',"phone_num":'15111111111', "price": 4999, "city": '北京',"time":'08-01 10:00', status: "待发货"},
                    {"id": 2, "phone_name": '小米6',"name":'李四',  "phone_num":'15222222222', "price": 2999, "city": '北京',"time":'08-02 10:00', status: "待发货"},
                    {"id": 3, "phone_name": '华为R9',"name":'王五', "phone_num":'15333333333', "price": 3999, "city": '上海',"time":'08-03 10:00', status: "已发货"},
                    {"id": 4, "phone_name": 'OPPO R11',"name":'赵六',"phone_num":'15444444444', "price": 4999, "city": '天津',"time":'09-04 10:00', status: "已收货"},
                    {"id": 5, "phone_name": 'VIVO',"name":'周七',"phone_num":'15555555555', "price": 2999, "city": '重庆',"time":'10-04 10:00', status: "已发货"},
                ];
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.myFromshow=false;
            $scope.s1 = false;
            $scope.s2 = false;
            $scope.s3 = false;
            $scope.s4 = false;
            $scope.s5 = false;
            $scope.s6 = false;
            $scope.s7 = false;
            //添加
            $scope.add = function() {
                //判断是否为空
                if ($scope.phone_name == undefined || $scope.phone_name == "") {
                    $scope.myFromshow = true;
                    $scope.s1 = true;
                    $scope.myObj = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj = {
                        "border": "1px solid #999"
                    }
                }
                //判断商品名是否是6-20个字符
                if ($scope.phone_name.length < 6 || $scope.phone_name.length > 20) {
                    $scope.myFromshow = true;
                    $scope.s2 = true;
                    $scope.myObj = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj = {
                        "border": "1px solid #999"
                    }
                }
                //判断用户名是否为空
                if ($scope.name == undefined || $scope.name == "") {
                    $scope.myFromshow = true;
                    $scope.s3 = true;
                    $scope.myObj1 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj1 = {
                        "border": "1px solid #999"
                    }
                }
                //判断用户名是否是6-20个字符
                if ($scope.name.length < 4 || $scope.name.length > 16) {
                    $scope.myFromshow = true;
                    $scope.s4 = true;
                    $scope.myObj1 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj1 = {
                        "border": "1px solid #999"
                    }
                }
                //判断手机号是否为空
                if ($scope.phone_num == undefined || $scope.phone_num == "") {
                    $scope.myFromshow = true;
                    $scope.s5 = true;
                    $scope.myObj2 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj2 = {
                        "border": "1px solid #999"
                    }
                }
                //判断手机号是否合格
                if($scope.phone_num.length!=11){
                    $scope.myFromshow=true;
                    $scope.s6 = true;
                    $scope.myObj3 = {
                        "border" : "1px solid red"
                    }
                    return;
                }else{
                    $scope.myObj3 = {
                        "border" : "1px solid #999"
                    }
                }
                //判断是否选择城市
                if ($scope.city == undefined || $scope.city == "") {
                    $scope.myFromshow = true;
                    $scope.s7 = true;
                    $scope.myObj3 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj3 = {
                        "border": "1px solid #999"
                    }
                }
                for(var i=2;i<$scope.data.length;i++) {
                    $scope.id = $scope.data[0].id+$scope.data[0+i].id;
                    $scope.price = $scope.data[i].price;
                    $scope.time = $scope.data[i].time;
                }

                $scope.data.push({
                    id:$scope.id,
                    phone_name:$scope.phone_name,
                    name:$scope.name,
                    phone_num:$scope.phone_num,
                    city:$scope.city,
                    price: $scope.price,
                    time: $scope.time,
                });
                $scope.phone_name="";
                $scope.name="";
                $scope.phone_num="";
                $scope.city="";
                $scope.addUserIsShow = false;
            };
            $scope.addUser = function(){
                $scope.addUserIsShow = true;
            };
            //排序  
            $scope.order2 = function (num) {
                if($scope.count1==2){
                    flag=true;
                }else{
                    flag=false;
                }
                data.sort(function(a,b){
                    if(flag){
                        return a.id> b.id?1:-1;
                    }else{
                        return a.id< b.id?1:-1;
                    }
                })
            }
            //默认为倒序  
            $scope.data = data;
            data.sort(function(a,b){
                if(flag){
                    return a.id> b.id?1:-1;
                }else{
                    return a.id< b.id?1:-1;
                }
            });
            //设置页面默认显示  
            $scope.show = true;
            //设置checkbox默认不选中  
            $scope.chk = false;
            $scope.xuanz = false;
            $scope.check = function (val) {
                //判断是否选中，然后控制下方的是否选中  
                if (val) {
                    $scope.xuanz = true;
                } else {
                    $scope.xuanz = false;
                }
            }
            //批量删除  
            $scope.search;
           // 删除
            $scope.remove = function (index) {
                var b = confirm("确认删除");
                if (b) {
                    $scope.data.splice(index, 1);
                }
            }
            $scope.del = function () {
                if ($scope.xuanz || $scope.checkD) {
                    var b = confirm("确认删除");
                    if (b) {
                        //删除所有商品信息  
                        if ($scope.chk) {
                            $scope.data.splice(0, $scope.data.length);
                            $scope.show = false;
                            $scope.hide = true;

                        } else {
                            for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
                                console.log($scope.xuan1[i]);
                                for (var j = 0; j < $scope.data.length; j++) {
                                    console.log($scope.data[j].id == $scope.xuan1[i]);
                                    if ($scope.data[j].id == $scope.xuan1[i]) {
                                        $scope.data.splice(j, 1);
                                    }
                                }
                            }
                        }
                    }
                } else {
                    alert("先进行选中要删除的商品信息");
                }
            }
            //批量发货
            $scope.goods = function(){
                if ($scope.xuanz || $scope.checkD) {
                    var b = confirm("确认发货");
                    if (b) {
                        if ($scope.chk) {
                            for (var i in $scope.data) {
                                if ($scope.data[i].status == "待发货") {
                                    $scope.data[i].status = "已发货";
                                }
                            }
                        } else {
                            for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
                                for (var j = 0; j < $scope.data.length; j++) {
                                    if ($scope.data[j].id == $scope.xuan1[i]) {
                                        $scope.data[j].status = "已发货";
                                    }
                                }
                            }
                        }
                    }
                } else {
                    alert("先进行选中要发货的商品信息");
                }
            };
            //全选
            $scope.checkD = false;
            $scope.xuan1 = [];
            $scope.xuan = function (xuanl, id) {
                console.log(id);
                $scope.checkD = xuanl;
                if (xuanl) {
                    $scope.xuan1.push(id);
                }
            }
            // 将待发货，改成已发货
            $scope.deliver = function (id) {
                for (var i in $scope.data) {
                    if ($scope.data[i].id == id) {
                        $scope.data[i].status = "已发货";
                    }
                }
            };
            //选择月份
            $scope.filterByMonth = function (item) {
                if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") {
                    return true;
                }

                if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") {
                    return true;
                }

                if ($scope.filter_begin_month > $scope.filter_end_month) {
                    return true;
                }

                var month = item.time.substr(0, item.time.indexOf("-"));
                month = parseInt(month);
                return (month >= $scope.filter_begin_month && month <= $scope.filter_end_month);
            };

            //按照价钱排序
            $scope.changePriceOrderType = function () {
                if ($scope.price_order_type == "price") {
                    $scope.price_order_type = "-price";
                } else {
                    $scope.price_order_type = "price";
                }
            };
            //按照时间排序
            $scope.changeTimeOrderType = function () {
                if ($scope.time_order_type == "time") {
                    $scope.time_order_type = "-time";
                } else {
                    $scope.time_order_type = "time";
                }
            };
            //全部删除
            $scope.removeAll = function () {
                var b = confirm("确认全部删除");
                if(b){
                    $scope.data = [];
                    $scope.show=false;
                    $scope.hide=true;
                }
            };
            //修改内容
            $scope.editUser = function (index) {
                var item = $scope.data[index];
                $scope.id = item.id;
                $scope.name = $scope.data[index].name;
                $scope.phone_name=$scope.data[index].phone_name;
                $scope.phone_num = $scope.data[index].phone_num;
                $scope.city=$scope.data[index].city;
                $scope.editUserIsShow = true;
                $scope.index = index;
            };

            $scope.edit = function () {
                //判断是否为空
                if ($scope.phone_name == undefined || $scope.phone_name == "") {
                    $scope.myFromshow = true;
                    $scope.s1 = true;
                    $scope.myObj = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj = {
                        "border": "1px solid #999"
                    }
                }
                //判断商品名是否是6-20个字符
                if ($scope.phone_name.length < 6 || $scope.phone_name.length > 20) {
                    $scope.myFromshow = true;
                    $scope.s2 = true;
                    $scope.myObj = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj = {
                        "border": "1px solid #999"
                    }
                }
                //判断用户名是否为空
                if ($scope.name == undefined || $scope.name == "") {
                    $scope.myFromshow = true;
                    $scope.s3 = true;
                    $scope.myObj1 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj1 = {
                        "border": "1px solid #999"
                    }
                }
                //判断用户名是否是6-20个字符
                if ($scope.name.length < 4 || $scope.name.length > 16) {
                    $scope.myFromshow = true;
                    $scope.s4 = true;
                    $scope.myObj1 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj1 = {
                        "border": "1px solid #999"
                    }
                }
                //判断手机号是否为空
                if ($scope.phone_num == undefined || $scope.phone_num == "") {
                    $scope.myFromshow = true;
                    $scope.s5 = true;
                    $scope.myObj2 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj2 = {
                        "border": "1px solid #999"
                    }
                }
                //判断手机号是否合格
                if($scope.phone_num.length!=11){
                    $scope.myFromshow=true;
                    $scope.s6 = true;
                    $scope.myObj3 = {
                        "border" : "1px solid red"
                    }
                    return;
                }else{
                    $scope.myObj3 = {
                        "border" : "1px solid #999"
                    }
                }
                //判断是否选择城市
                if ($scope.city == undefined || $scope.city == "") {
                    $scope.myFromshow = true;
                    $scope.s7 = true;
                    $scope.myObj3 = {
                        "border": "1px solid red"
                    }
                    return;
                } else {
                    $scope.myObj3 = {
                        "border": "1px solid #999"
                    }
                }
                $scope.data[$scope.index].phone_name = $scope.phone_name;
                $scope.data[$scope.index].name = $scope.name;
                $scope.data[$scope.index].phone_num = $scope.phone_num;
                $scope.data[$scope.index].city = $scope.city;
                $scope.addUserIsShow = false;
                $scope.editUserIsShow = false;
            };

        })
    </script>
</head>
<div ng-app="myapp" ng-controller="myCtrl">
<div class="search">
    <input type="text" placeholder="用户名搜索" ng-model="search">
    <input type="text" placeholder="手机号搜索" ng-model="search_phone">

    <select class="level" ng-model="search_city" >
        <option value="">选择城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="天津">天津</option>
        <option value="重庆">重庆</option>
    </select>
    <select class="level" ng-model="filter_status">
        <option value="">选择状态</option>
        <option value="待发货">待发货</option>
        <option value="已发货">已发货</option>
        <option value="已收货">已收货</option>
    </select>
    <select class="level" ng-model="filter_begin_month">
        <option value="">开始月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <span style="margin-left: 5px;">-</span>
    <select class="level"  ng-model="filter_end_month">
        <option value="">结束月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select  ng-model="count1" ng-change="order2()">
        <option value="">ID倒序</option>
        <option value="2">ID正序</option>
    </select>
</div>
<div class="search1">
    <button class="tian" ng-click="addUser()">新增订单</button>
    <button class="tian" ng-click="goods(item.id)">批量发货</button>
    <button  ng-click="del()">批量删除</button>
    <button ng-click="removeAll()">全部删除</button>
    <h3 ng-show="hide">您的商品为空,去逛超市</h3>
</div>
<!--用来遍历对象并渲染到页面中-->

<table cellpadding="10" cellspacing="0"  ng-show="show">
    <thead style="background-color: #777777">
    <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>
    <th>ID</th>
    <th>商品名</th>
    <th>用户名</th>
    <th>手机号</th>
    <th>价格 <button ng-click="changePriceOrderType()" class="btn">排序</button> </th>
    <th>城市</th>
    <th>下单时间<button ng-click="changeTimeOrderType()" class="btn1">排序</button></th>
    <th>状态</th>
    <th  colspan="2">数据操作</th>
    </thead>
    <tbody>
    <!--实现模糊查询-->
    <tr ng-repeat="item in data| filter:{name:search} | filter: {phone_num: search_phone} | filter: {status: filter_status} | filter: filterByMonth | filter: {city: search_city}| orderBy: price_order_type | orderBy: time_order_type " ng-class="{even_cls: !$even, odd_cls: !$odd}">
        <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>
        <td>{{item.id}}</td>
        <td> {{item.phone_name}}</td>
        <td> {{item.name}}</td>
        <td> {{item.phone_num}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td>{{item.city}}</td>
        <td>{{item.time}}</td>
        <td>
            <span ng-show="item.status=='待发货'" ng-click="deliver(item.id)">
                <a href="javascript: void(0);">发货</a>
            </span>
            <span ng-show="item.status=='已发货'">已发货</span>
            <span ng-show="item.status=='已收货'">已收货</span>
        </td>
        <td><button ng-click="editUser($index)" class="btn2">修改内容</button></td>
        <td>
            <button ng-click="remove()" class="btn2">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="form" ng-show="addUserIsShow">
    <h3>新增订单</h3>
    <div>
        <span class="label">商品名</span>
        <span class="txt"><input type="text" placeholder="6-20个字符" ng-model="phone_name"  ng-style="myObj" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">用户名</span>
        <span class="txt"><input type="text" placeholder="4-16个字符" ng-model="name"  ng-style="myObj1" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">手机号</span>
        <span class="txt"><input type="text" ng-model="phone_num"  ng-style="myObj2" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">城市</span>
        <span class="txt">
            <select ng-model="city"  ng-style="myObj3">
                <option value="">选择城市</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">天津</option>
                <option value="4">重庆</option>
            </select>
        </span>
    </div>
    <div style="clear: both"></div>
    <div class="errTips" ng-show="myFromshow">
        <ul>
            <li ng-show="s1">商品名不能为空！</li>
            <li ng-show="s2">商品名必须是6-20个字符！</li>
            <li ng-show="s3">用户名不能为空！</li>
            <li ng-show="s4">用户名必须是4-16个字符！</li>
            <li ng-show="s5">手机号不能为空！</li>
            <li ng-show="s6">手机号格式不正确！</li>
            <li ng-show="s7">请选择城市！</li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label"></span>
        <span class="txt"><button ng-click="add()">提交</button></span>
    </div>
    <div style="clear: both"></div>
</div>
<div class="form" ng-show="editUserIsShow">
    <h3>修改订单</h3>
    <div>
        <span class="label">商品名</span>
        <span class="txt"><input type="text" placeholder="6-20个字符" ng-model="phone_name"  ng-style="myObj" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">用户名</span>
        <span class="txt"><input type="text" placeholder="4-16个字符" ng-model="name"  ng-style="myObj1" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">手机号</span>
        <span class="txt"><input type="text" ng-model="phone_num"  ng-style="myObj2" /></span>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label">城市</span>
    <span class="txt">
        <select ng-model="city"  ng-style="myObj3">
            <option value="">选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">天津</option>
            <option value="4">重庆</option>
        </select>
    </span>
    </div>
    <div style="clear: both"></div>
    <div class="errTips" ng-show="myFromshow">
        <ul>
            <li ng-show="s1">商品名不能为空！</li>
            <li ng-show="s2">商品名必须是6-20个字符！</li>
            <li ng-show="s3">用户名不能为空！</li>
            <li ng-show="s4">用户名必须是4-16个字符！</li>
            <li ng-show="s5">手机号不能为空！</li>
            <li ng-show="s6">手机号格式不正确！</li>
            <li ng-show="s7">请选择城市！</li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div>
        <span class="label"></span>
        <span class="txt"><button ng-click="edit()">提交</button></span>
    </div>
    <div style="clear: both"></div>
</div>
</div>
</body>
</html>


Anni的咖啡
关注
专栏目录
使用Angular创建数据的增删改查
Castertonone的博客
04-02 748
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;&lt;/title&gt;  &lt;style&gt;   /*展示数据每行变色*/      .css1 {    background-color: #00ff99;   }      .c
Java电商项目-2.实现后台商品查询,上下架及删除
炭烧生蚝的博客
05-08 9522
文章目录[到Github获取源码请点击此处](https://github.com/liuyj24/Awesome-Shop)一. 使用Mybatis分页插件完成商品的分页查询二. 商品的上下架实现三. 实现商品删除操作 到Github获取源码请点击此处 一. 使用Mybatis分页插件完成商品的分页查询 在第一章中我们已经搭建好了环境, 并且在配置Mybatis的时候已经配置好了分页插件. ...
Java 案例七 超市管理系统（商品清单，商品添加，商品删除，修改库存）
热门推荐
子非愚的博客
11-02 1万+
import java.util.ArrayList; import java.util.Scanner; /* * 超市管理系统 * 实现的功能： * 1.商品数据的初始化 * 2.用户的菜单选择 * 3.根据选择执行不同的功能 * 3.1 read 查看商品 * 3.2 Create 添加商品 * 3.3 Delete 删除商品 * 3...
基于Angular的增删改查
江南烟浓雨的博客
07-15 1040
本项目基于AngularCLI14.01开发。使用了node.js中的jsonserver作为服务器，提供数据库的服务。使用了Angular官方的Material组件库，美化网页UI界面和提高交互体验。,已经利用GitHubPage进行部署，可以在商品信息管理系统(gausshj.github.io)上看到本项目运行效果。打开backend文件夹，然后在终端中输入命令通过本次Angular项目开发，使我学习了Angular项目开发的基本流程。...
Angular JS实现增删改查
GaoYiranBlog的博客
01-19 349
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style&gt;             #tianjia input{              
angular JS (增删改查)
houyingshang的博客
03-29 290
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-s
angular增删改查（全面细节）
Melect的博客
02-28 2206
angular增删改查                                   var app = angular.module("anan", []);               app.controller("enen", function($scope) {                   //数据                   $scope.user =
angularjs增删改查
jjt_cmdn的博客
09-24 233
--请选择-- 价格正序 价格倒序 日期正序 日期倒序 {{t.sname}} {{t.fname}} {{t.time}} {{t.fprice|curre...
Angular JS-实现增删改查
Aigi_ZJ的博客
01-17 258
var app = angular.module("App",[]); app.controller("myCtrl",function($scope){ $scope.datas = [{ id:1001, name:"张帅", num:1, price:6666, state:false }, {
Angular使用Restful的增删改
10-17
增删改查（CRUD）操作分别对应不同的HTTP方法：POST用于创建资源，GET用于查询资源，PUT用于更新资源，DELETE用于删除资源。符合这些原则的API设计有助于提高服务的可用性和可扩展性。 ### Angular HttpClient模块 ...
简易版的商品列表展示及增删查改
06-10
这个“简易版的商品列表展示及增删查改”项目旨在提供一个基础的示例，帮助初学者理解如何实现这些基本操作。下面我们将详细探讨相关的知识点。 1. **数据库设计**： - 商品列表通常需要一个数据库来存储数据，如...
PHP项目实战之商品的增删改查
William_fang的博客
09-18 2066
文章目录一.项目思路二.查询端口号三.常见错误1.错误分析2.解决方案 一.项目思路 二.查询端口号 C:\Users\HP>d: D:\>cd D:\phpNow\MySQL-5.0.90\bin D:\phpNow\MySQL-5.0.90\bin>mysql -u root -p mysql> status //查看端口号 三.常见错误 1.错误分析 Fatal error: Class 'mysqli' not found in D:\phpNow\htdocs\s
angular 实现等待一段时间显示文字
Anni__9468的博客
10-13 3328
一.使用angular实现得到当前时间以及规定多少时间后显示数据 二.实现代码 {{ nowtime }} 等待5秒显示的文字：{{ mytext }} var nowtime = function () { return new Date().toLocaleDateString() + " " + ne
angular 获取json字符串
Anni__9468的博客
10-13 1669
一.使用 angular获取字符串需要将所需要的字符串导入工程项目中,然后再进行对字符串元素获取的操作 二.进行代码展示 var app = angular.module("myApp", []); app.controller("bookCtrl", function ($scope, $http) {
angular实现httpget请求
Anni__9468的博客
10-13 1155
一.实现http请求,需要将所需的json文件导入工程中,否则无法正确实现效果 二,http请求的代码展示 var app = angular.module("myApp", []); app.value("url_book", "book.json"); app.value("url_books"
angular进行时间展示
Anni__9468的博客
10-13 791
一.在angular中有很多属性方法,一下为大家展示下简单的显示时间的操作 二.代码展示 var app = angular.module("timer",[]); app.directive("nowTime",function(){ return{ rest
html 中的location部分方法
Anni__9468的博客
10-08 783
一.代码 // console.log("URL地址: " + window.location.href); // console.log("主机名: " + window.location.hostname); // console.log("端口: " +
html 中显示.隐藏的方法的使用
Anni__9468的博客
10-08 758
一.代码展示 // function showTitle() { // var titleElement = document.getElementById("title"); // titleElement.style.display = "b
angular js写增删改查代码实现
最新发布
07-25
下面是使用AngularJS实现增删改查的示例代码： HTML模板： ```html 用户列表 姓名 年龄 操作 <td>{{user.name}} <td>{{user.age}} (user)">编辑 (user)">删除 添加/编辑用户 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值