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= ...
随机推荐
- Android utils 工具类之MD5加密 MD5Utils
实际开发过程中,密码不会保存明文形式,容易被别人窃取. MD5加密是不可逆的加密算法,只能由明文转换成密文. 但是有些人通过将明文对应的密文保存在数据库中,进行查询破解密文.为防止这种解密,根据许多对 ...
- Hadoop_MapReduce_03
1. MapReduce入门 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 适用于大量的复杂的任务处理场景 (大规模数据处理场景) . Map负 ...
- javax.servlet.ServletException: Could not resolve view with name 'order/list' in servlet with name 'dispatcherServlet'
javax.servlet.ServletException: Could not resolve view with name 'order/list' in servlet with name ' ...
- django-建表出现的错误
在执行python3 manage.py migrate时出现以下错误 ?: (mysql.W002) MySQL Strict Mode is not set for database connec ...
- IT兄弟连 HTML5教程 CSS3属性特效 小结及习题
本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...
- IT兄弟连 HTML5教程 CSS3属性特效 transition过渡
CSS3的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. transitio ...
- Web安全测试学习笔记-DVWA-盲注(使用sqlmap)
之前的sql注入页面(https://www.cnblogs.com/sallyzhang/p/11843291.html),返回了查询结果和错误信息.而下面的页面,返回信息只有存在和不存在两种情况, ...
- typeORM 多对多关系不同情况的处理
本文以RBAC权限管理中的用户和角色举例,两个实体存在多对多的关系,一个用户拥有多个角色,一个角色属于多个用户.typeorm的中文文档没有对自定义中间表的说明,发现英文有相关说明,但示例代码貌似有问 ...
- ubuntu 安装在硬盘与配置
安装 下载Ubuntu ISO文件,使用rufus制作启动U盘,重启选择这个U盘启动. 用rufus做启动盘时,提示缺少文件,点下载,找到log,进入找到下载地址,手动下载,并放到软件所在路径下的文件 ...
- ES6-Proxy，代理
proxy 代理 Es6 增强 对象和函数(方法) Proxy用于修改某些操作的默认行为,即对编程语言层面进行修改,属于“元编程”, Proxy意思为“代理”,即在访问对象之前建立一道“拦截”,任 ...