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= ...
随机推荐
- java 获取当前年份 月份,当月第一天和最后一天
获取当前年份 月份,当月第一天和最后一天,工作中会经常用到,下面是代码: package basic.day01; import java.text.SimpleDateFormat; import ...
- Bash脚本编程之数组
数组简介 在bash脚本编程当中,变量是存储单个元素的内存空间:而数组是存储多个元素的一段连续的内存空间. 数组由数组名和下标构成,如下. ARRAY_NAME[SUBSCRIPT] 数组按照下标的类 ...
- linux 常用Mysql脚本命令
常用命令 无需系统Root权限 新数据库设置Root密码 visible > mysql -uroot -p visible > mysqladmin -uroot password &q ...
- 安装包RPM包或源码包
RPM工具 # mount /dev/cdrom /mnt 挂载光盘 # rpm 软件包管理器 -i 安装(需要安装包完整名称) -v 可视化 -h 显示安装进度 ...
- Appium(八)：Appium API(二) 元素等待、元素操作
1. 元素等待 我们在使用脚本的时候,可能会由于网络.服务器处理.电脑等原因,我们想要找的元素没有加载出来,这个时候如果直接定位就可能会报错. 这个时候我们就可以设置元素等待了. 什么叫元素等待呢? ...
- DRF单表序列化和反序列化
安装 djangorestframework pip install djangorestframework 将rest_framework注册到app上 INSTALLED_APPS = [ 're ...
- EggJS接口开发
需求 随着Nodejs的普及,前端开发的开发场景基本可以贯穿界面交互到数据存储,无缝实现全栈开发.最近在实现一个内部项目管理工具的时候,就尝试了一把接口和数据库开发. 什么是Egg.js Egg.js ...
- ASP.NET底层原理
上图基本上演示了IIS 6整个处理过程.在User Mode下,http.sys接收到一个基于aspx的http request,然后它会根据IIS中的Metabase查看该基于该Request的Ap ...
- windows中常见后门持久化方法总结
转自:https://www.heibai.org/category-13.html 前言 当我们通过各种方法拿到一个服务器的权限的时候,我们下一步要做的就是后渗透了,而后门持久化也是我们后渗透很重要 ...
- OPENGL 坐标轴转换
坐标轴 平移 旋转 缩放 重置坐标轴 矩阵操作 示例 1.坐标轴 OpenGL 使用的右手坐标系,从正面看原点,逆时针旋转被认为是正旋转. x轴:从左到右 y轴:从底部向上 z轴:从屏幕背向朝向前方 ...