商品列表搜索查询

最新推荐文章于 2023-07-03 19:30:11 发布
最新推荐文章于 2023-07-03 19:30:11 发布
阅读量532 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thw_m/article/details/78233188
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>商品列表搜索查询</title>
        <script type="text/javascript" src="../AngularJS/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.products = [{
                    id:80,
                    name:"iphone",
                    price:5400
                },{
                    id:150,
                    name:"ipad mini",
                    price:2200
                },{
                    id:120,
                    name:"ipad air",
                    price:2340
                },{
                    id:160,
                    name:"ipad",
                    price:1420
                },{
                    id:130,
                    name:"imac",
                    price:15400
                }];
                
                $scope.sortFlag = "-";
                $scope.sortName = "name";
                //定义排序功能
                $scope.sortProducts = function(clomnName){
                    $scope.sortName = clomnName;
                    if($scope.sortFlag == "-"){
                        $scope.sortFlag = "";
                    }else{
                        $scope.sortFlag = "-";
                    }
                }
                
                //删除指定商品
                $scope.deleteProduct = function(name){
                    //alert(name);
                    //var i = -1;
                    for(index in $scope.products){
                        if($scope.products[index].name == name){
                            //i = index;
                            $scope.products.splice(index,1);
                        }
                    }
                }
                //全部删除
                $scope.deleteAll = function(){
                    $scope.products = null;
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>商品列表</h3>
            <input type="text" ng-model="serach" placeholder="产品名称" />
            <button ng-click="deleteAll()">全部删除</button><br/><br/>
            <table border="1 solde" cellspacing="0" cellpadding="10">
                <thead>
                    <tr>
                        <th ng-click="sortProducts('id')">产品编号</th>
                        <th ng-click="sortProducts('name')">产品名称</th>
                        <th ng-click="sortProducts('price')">产品价格</th>
                        <th>功能</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="goods in products | filter:serach | orderBy:(sortFlag+sortName)">
                        <td>{{goods.id}}</td>
                        <td>{{goods.name}}</td>
                        <td>{{goods.price}}</td>
                        <td><button ng-click="deleteProduct(goods.name)">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </center>
    </body>
</html>

meng_c_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现查询商品案例
12-28
本文实例为大家分享了js实现查询商品的具体代码，供大家参考，具体内容如下 <div class=search> 按照价格查询：<input type=text class=start> - <input type=text class=end> <button class=search-price>搜索</button> 按照商品名称查询：<input type=text class=product> <button class=search-prro>查询</button> </div> <table> <thead> <tr>
jQuery实现购物车表单自动结算效果实例
12-08
本文实例讲述了jQuery实现购物车表单自动结算效果。分享给大家供大家参考。具体如下： 这里jQuery实现购物车表单自动结算，只要用户把所购商品的数量输入进去，就可以适时计算出商品总额，金额+运费，类似淘宝的购物车结算功能，计算过程是适时的，用jquery实现了Ajax不刷新网页就计算的功能，做购物类网站的或许可以用上这个例子。 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
AngularJS实现产品列表（页面搜索，排序）
weixin_34040079的博客
06-29 94
标签属性介绍ng-class="{className:expression}" 如果expression为true，则使用className这个class。ng-click="functionName(pram)" 这跟onclick是一样的，点击就执行functionName(pram)。ng-repeat="i in set | filter:filterExpressi...
加入购物车列表 HTML + CSS + js
最新发布
W256999的博客
07-03 1204
【代码】加入购物车列表 HTML + CSS + js。
关于AngularJS的学习报告
diandannv8089的博客
12-25 232
由于我的Web前端的工作量不足，于是袁老师给了我一次写一篇关于AngularJS的学习报告来弥补工作量不足的机会，我很感谢袁老师给了我这次学习AngularJS的机会。 AngularJS是一个开发动态Web应用的框架，通过新的属性和表达式扩展了HTML，可以构建一个单一页面应用程序，它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScri...
js实现简单商品查询
qq_43467284的博客
11-04 3137
html代码（进行简单布局） <div class="box"> <!--设置按价格查询输入框--> <label for="jg">价格查询：</label><input type="text" id="jg" class="num1"/><span>-</span><input type="text" id="jg" class="num2"/><button class="btn1">搜索&
（九）实现页面底部购物车的样式
感恩、奋进、自信
05-04 2358
页面底部购物车的样式分为3种，如下图所示图1图2图3图1中的4元配送费和20元起送是后台返回的数据并且底部字体样色是灰色 的；图2是当有食品家务购物车的时候，购物车的字体变色并且logo右上方会有数字提示所加商品数，右边的“20元起送”变成“还差多少元起送”；图3当所加商品的总额超过还差20元的时候，最右边的“还差多少元起送”变成“去结算”并且字体样色和背景色变色下面就看看如何实现购物车shopC...
微信小程序实现一个购物车页面的简易列表效果
WindfallSheng的博客
08-20 5685
wxml部分的代码： <view wx:if="{{!isCartEmpty}}"> <view class="cart-item" wx:for="{{cartList}}" wx:key="{{item.merchantInfo.merchantId}}"> <!-- 商家部分布局 --> <view class="item-box item-merchant"> <view class="cart-check-box..
淘宝购物车展示效果列表清单
yaya1286249672的博客
01-02 2747
html lang="en"> head> meta charset="UTF-8"> title>购物车页面title> style> *{margin:0;padding:0;} #container{width:1200px;border:solid 1px #ccc;height:500px;} #goodslist{
js高级 商品查询案例-利用数组的新增方法操作数据
miracle_linlei的博客
05-05 528
<div class="search"> 按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="searc...
js数组方法实现简单商品查询.html
11-04
js实现简单商品查询，使用数组方法，按价格区间查询和按商品名查询。通过更新数组，添加节点来显示对应查询到的内容。
angularjs商品列表页代码
03-01
angularjs商品列表页代码
购物车表单
weiyangmeng的博客
05-04 742
布局： xml version="1.0" encoding="utf-8"?> LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" andro
HTML+CSS实现购物车表格
qq_37086980的博客
11-13 9564
HTML: <main> <div class="container"> <table border="0" cellspacing = "0" id = "shoppingcartinfo"> <thead> <tr> <th width = ..
一款非常漂亮的bootstrap表单checkbox/radio样式推荐
热门推荐
Love.Hope.Faith
03-02 3万+
如题。 http://www.bootcss.com/p/icheck/ 这个bootstrap提供的icheck插件，首先是非常小。效率相对较高。其优点如下图所示： 可以有十种颜色可以供用户自定义。样式也是够丰富的。更重要的是，其样式是根据css来的。也就是用户如果觉得不爽，可以直接修改css文件来达到进一步的自定义。 如果你使用一个盒子来包住它。元素的大小就会根据父级元素来进行
HCI第三篇：表单应用：按钮之购物车
H_W_1212的博客
04-21 469
在学习表单的相关知识后，尝试做了一个页面，话不多说，直接看结果： 结果比较简陋，大家下来有空可以进行美化。这里我提供一下源码： 1.index.html页面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>购物数量统计</title> <meta ...
angularjs商品列表(增删改查)
DING_YZz的博客
12-18 578
var app = angular.module("myApp", []);    app.controller("myCtrl", function($scope) {     $scope.shops = [{      id: 80,      name: "iPhone",      price: 5400,      num:10,      state: false  
在products.html中添加一个查询条件，可按商品名称查询商品列表。如果不输入查询条件，则默认搜索所有商品
06-12
好的，要在 products.html 中添加一个查询条件，可按商品名称查询商品列表，可以按照以下步骤进行： 1. 在 products.html 页面上添加一个输入框和一个按钮，用于输入查询条件和触发查询操作。 ```html 请输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值