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= ...
随机推荐
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- 基于Jenkins的开发测试全流程持续集成实践
今年一直在公司实践CI,本文将近半年来的一些实践总结一下,可能不太完善或优美,但的确初步解决了我目前所在项目组的一些痛点.当然这仅是一家之言也不够完整,后续还会深入实践和引入Kubernetes进行容 ...
- react中使用prop-types检测props数据类型
一.为什么使用prop-types 在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想 ...
- Fortify---Detail--Sql注入
Abstract: 在 PaperDao.java 的第 40 行,checkQuesUsed() 方法调用通过不可信来源的输入构建的 SQL 查询.通过这种调用,攻击者能够修改指令的含义或执行任 ...
- 测试人员必备之 mysql 常用命令学习指南
1.数据库连接 1.通过命令行连接数据库 [root@localhost ~]# mysql -u root -p Enter password: 输入以上命令,回车后输入密码,回车,出现 mysql ...
- css实现内容不相同的左右两个div等高
问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...
- 基于canvas二次贝塞尔曲线绘制鲜花
canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...
- JDK性能分析与故障处理-命令行
一.命令演示登录主机:21docker ps -a | grep 'hub.ecs.com:6999/open_pro.*open-pro-apple2'docker exec -it ID /bin ...
- ESPCMS P8 stable version Front-end reflective xss
Download the source code first In the directory espcms_web\espcms_load.php line 67 if (!is_file($mod ...
- spring为类的静态属性实现注入
我们知道,正常情况下,spring的一个bean要依赖其他资源,如properties或其他bean,直接利用@Value或@Autowired就可以了.这两个注解就相当于spring applica ...