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= ...
随机推荐
- git到GitHub的操作和遇到的一些问题
一.新建完项目后执行git git status //查看状态,任何时候都可以用 1. git init //初始化文件夹,并创建.git本地仓库(.git默认隐藏) 2. git add . //把 ...
- AndroidStudio初识
大家好,欢迎来到下码看花,伟大领袖毛爷爷曾经说过:“ ‘走马看花不如驻马看花,驻马看花不如下马看花.’我希望你们都要下马看花.”,比喻停下来,深入实际,认真调查研究,这就是咱们公众号名字的由来.与君初 ...
- android studio 常见编译问题及解决思路总结
问题一:编译运行成功后放置一段时间后再运行会报错 这个问题让我纠结了不少时间,最后才发现遇到类似的错误,clear一下project就好了.这个一般是上次生成的临时文件和这次的有冲突造成的. 问题二: ...
- 求连通块的面积 - BFS、DFS实现
本文以Leetcode中695.岛屿的最大面积题目为基础进行展开(题目
- 精通awk系列(7)：awk读取行的细节
回到: Linux系列文章 Shell系列文章 Awk系列文章 详细分析awk如何读取文件 awk读取输入文件时,每次读取一条记录(record)(默认情况下按行读取,所以此时记录就是行).每读取一条 ...
- MTDDL 美团分布式数据访问中间件（转）
MTDDL 美团分布式数据访问中间件(转) 原文地址:MTDDL--美团点评分布式数据访问层中间件 因原文文字和图显示有问题,故整理于此,仅供参考. 业界方案 组件 简介 Atlas Qihoo 36 ...
- Ubuntu 无法打开系统设置
最近不知道咋搞得,导致系统设置打不开,可能是系统输入法的问题吧,运行以下命令: sudo apt-get install gnome-control-center
- android studio 3.4配置Android -jni 开发基础
首先下载配置android studio ndk 1.打开sdkManager下载CMake和LLDB 2.配置ndk 项目新建 项目建立完毕后,工程目录如下,cpp文件夹是系统自动生成的 3.自定义 ...
- 升级python2.7至python3.7
最近在centos7下执行命令时,出现以下提示: DEPRECATION: Python 2.7 will reach the end of its life on January 1st, 2020 ...
- MySQL 学习笔记 （一）
1.InnoDB and Online DDL ALTER TABLE tbl_name ADD PRIMARY KEY (column), ALGORITHM=INPLACE, LOCK=NONE; ...