angularjs实现购物车批量删除，filter模糊查询，排序
数据源
$scope.data=[
{num:1234,name:"ipad",price:3400.00,count:10},
{num:1235,name:"iphone",price:6400.00,count:100},
{num:1236,name:"mypad",price:4400.00,count:20},
{num:1237,name:"zpad",price:8400.00,count:130},
{num:1238,name:"mp3",price:100.00,count:200}
];
Html的样式
<body ng-app="myapp" ng-controller="myCtrl">
<header><input type="text" ng-model="seartext"> <button ng-click="clear()">批量删除</button></header>
<table>
<tr>
<th><input type="checkbox" id="all"></th>
<th>商品编号</th>
<th ng-click="sortName()" class="name">商品名称</th>
<th>商品价格</th>
<th>商品库存</th>
<th>数据操作</th>
</tr>
<tr ng-repeat="item in data | filter:seartext |orderBy:'name':setSort">
<td><input type="checkbox" name="checkbox"></td>
<td>{{ item.num }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price | currency:"￥:"}}</td>
<td>{{ item.count }}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
</table>
</body>
1.先利用ng-repeat="item in data”将数据展示出来,
2.利用过滤器实现模糊查询 filter:seartext （），<input type="text" ng-model="seartext">根据ng-model来得到输入框的值，
3.利用过滤器currency:"￥:”在价格前面加上符号.
4.删除一条数据,
/*删除单一条目*/
$scope.delete=function (index) {
if(confirm("确定要删除此项?")){
$scope.data.splice(index,1);
}
};
html上写一个按钮，并将当前条目的下标传给删除方法
<button ng-click="delete($index)">删除</button></td>
5.批量删除
/*批量删除*/
$scope.clear=function () {
/*没有选中多选框时*/
if($("input:checkbox").is(":checked")){
if($("#all").is(":checked")){
// 删除所有
if(confirm("是否删除所有页面信息?")){
$scope.data.splice(0,$scope.data.length);
}
}
}else{
alert("得先选中要删除的商品!");
}
}
6.排序
/*排序*/
$scope.setSort=true;
$scope.sortName=function () {
/*点击字体变色*/
$(".name").click(function () {
$(this).css("color","red");
});
if($scope.setSort==true){
$scope.setSort=!$scope.setSort;
}else{
$scope.setSort=!$scope.setSort;
}
}
7.利用jqueary全选
/*全选*/
$("#all").click(function () {
if($(this).is(":checked")){
$(":checkbox").prop("checked",true);
}else{
$(":checkbox").prop("checked",false);
}
})
全部的代码
<script>
$(function () {
/*全选*/
$("#all").click(function () {
if($(this).is(":checked")){
$(":checkbox").prop("checked",true);
}else{
$(":checkbox").prop("checked",false);
}
})
}) </script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data=[
{num:1234,name:"ipad",price:3400.00,count:10},
{num:1235,name:"iphone",price:6400.00,count:100},
{num:1236,name:"mypad",price:4400.00,count:20},
{num:1237,name:"zpad",price:8400.00,count:130},
{num:1238,name:"mp3",price:100.00,count:200}
];
/*删除单一条目*/
$scope.delete=function (index) {
if(confirm("确定要删除此项?")){
$scope.data.splice(index,1);
}
}; /*批量删除*/
$scope.clear=function () {
/*没有选中多选框时*/
if($("input:checkbox").is(":checked")){
if($("#all").is(":checked")){
// 删除所有
if(confirm("是否删除所有页面信息?")){
$scope.data.splice(0,$scope.data.length);
}
}
}else{
alert("得先选中要删除的商品!");
}
}
/*排序*/
$scope.setSort=true;
$scope.sortName=function () {
/*点击字体变色*/
$(".name").click(function () {
$(this).css("color","red");
});
if($scope.setSort==true){
$scope.setSort=!$scope.setSort;
}else{
$scope.setSort=!$scope.setSort;
}
} }) </script>
angularjs实现购物车批量删除，filter模糊查询，排序的更多相关文章
- T-SQL - query03_去重查询|模糊查询|排序|分组|使用函数
时间:2017-09-29 整理:byzqy 本篇仍以"梁山好汉"数据表为例,介绍几个常用的 T-SQL 查询语句: 去重查询,关键字:distinct 使用通配符模糊查询,关键字 ...
- stark组件的分页，模糊查询，批量删除
1.分页组件高阶 2.整合展示数据showlist类 3.stark组件之分页 3.stark组件之search模糊查询 4.action批量处理数据 4.总结 1.分页组件高阶 1.分页的class ...
- StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改
前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...
- 10 star组件之分页， search模糊查询， action批量处理
1.分页组件高阶 1.分页的class形式(有bug,请看下面的) """ 自定义分页组件 """ class Pagination(obj ...
- SQL模糊查询与删除多条语句复习
string IDlist="1,2,3"; 批量删除数据 StringBuilder strsql=new StringBuilder(); strSql.Append(&quo ...
- redis 模糊查询与删除
创建一条数据 set name1 zhangsan 查询 get name1 在创建一条数据 set name2 lisi 查询 get name2 模糊查询 keys name* 查询结果 n ...
- Mybatis框架的模糊查询（多种写法）、删除、添加（四）
学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构 二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...
- mybatis（二）接口编程 、动态sql 、批量删除 、动态更新、连表查询
原理等不在赘述,这里主要通过代码展现. 在mybatis(一)基础上,新建一个dao包,并在里面编写接口,然后再在xml文件中引入接口路径,其他不变,在运用阶段将比原始方法更节约时间,因为不用再去手动 ...
- php部分---对数据的多条件查询，批量删除
1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...
随机推荐
- Nginx 安装、配置及相关介绍
一.前言 Nginx是一个高性能的HTTP和反向代理服务器,由俄罗斯人开发的,第一个版本发布于2004年10月4日.是一款轻量型的Web服务器,其特点是占有内存少,并发能力强,对负载均衡等提供了非常方 ...
- C#开发微信小程序（三）
导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...
- sql server中取交集、差集和并集的语法
这里简单总结下在SQL Server中取交集.差集和并集的语法. 交集:INTERSECT(适用于两个结果集) SELECT ID, NAME FROM YANGGB1 INTERSECT SELEC ...
- WebShell代码分析溯源(六)
WebShell代码分析溯源 一.一句话变形马样本 <?php call_user_func('assert', $_REQUEST['assert']); ?> 二.代码分析 1.分析代 ...
- Geoserver发布服务
Geoserver发布服务的数据源很多样化 在数据存储中选择要发布的数据来源,这里以POSTGIS为例 1. 2.如果成功,就会读取出库里面的表,你可以在这里添加图层,发布服务 3.点击发布,进行服务 ...
- C语言编程的一些小总结
1. static:可用于定义静态局部变量 在局部变量前,加上关键字static,该变量就被定义成为一个静态局部变量. 举一个静态局部变量的例子: void fn() { static int n=1 ...
- C# 让你解决方案乱七八糟的DLL放入指定文件夹
嗯,大家的解决方案可能会有许多dll,这样不美观,而且也麻烦. 很多小白都不知道如何将这些dll放到如自己程序的bin文件夹下. 本渣今天来试着将dll复制到指定的文件夹下~ 比如我之前做的一个Win ...
- golang+webgl实践激光雷达（一）激光扫描仪基础知识
一.前言 最近做一个测量料堆形状的项目,通过前期调研,最后决定用激光测距原理进行测量.通过旋转云台+激光扫描仪实现空间三维坐标的测量.其中激光扫描仪扫射的是一个二维的扫描面,再通过云台旋转,则形成一个 ...
- RabbitMQ学习笔记（八、RabbitMQ总结）
1.什么是消息中间件 Message Queue Middleware,简称MQ,是一种利用高效可靠的消息传递机制进行与平台无关的数据交互的技术. 2.MQ的作用 异步:类似于短信业务,将需要发送的消 ...
- Attention 和self-attention
1.Attention 最先出自于Bengio团队一篇论文:NEURAL MACHINE TRANSLATION BY JOINTLY LEARNING TO ALIGN AND TRANSLATE ...