angularjs表格批量刪除和全選反選
<style> table { border: 1px solid #000; border-collapse: collapse; } tr, td { border: 1px solid #000; border-collapse: collapse; padding: 10px; } .font{ color: red; } </style>
<script src="script/angular.min.js"></script> <script> var myapp = angular.module("myapp", []); var items = [ {"nums": "1234", "name": "ipad", "price": 3400, "kucun": 10,check:false}, {"nums": "1547", "name": "iphone8", "price": 8900, "kucun": 100,check:false}, {"nums": "1456", "name": "iphone9", "price": 10800, "kucun": 520,check:false}, {"nums": "1454", "name": "ipad5", "price": 5600, "kucun": 40,check:false} ]; myapp.controller("myctrl", function ($scope) { $scope.items = items; $scope.delete = function ($index) { if($index>=0){ if(confirm("是否刪除"+$scope.items[$index].name+"商品") ){ $scope.items.splice($index,1);} } }; $scope.order="nums"; $scope.allcheck=false; $scope.ischeck=false; $scope.checkall=function () { if($scope.allcheck=true){ for(var i=0;i<$scope.items.length;i++){ $scope.items[i].check=true; } }else { for(var i=0;i<$scope.items.length;i++){ $scope.items[i].check=false; } } } $scope.itemcheck=function () { var flag=0; for(var i=0;i<$scope.items.length;i++){ if($scope.items[i].check==true){ flag++; } } if(flag==$scope.items.length){ $scope.allcheck=true; }else { $scope.allcheck=false; } } $scope.deleteall=function () { var is=confirm("是否刪除"); if(is==true){ var arr=[]; for(var i=0;i<items.length;i++){ if(items[i].check==false){ arr.push(items[i]); } } $scope.items=arr; } }; $scope.addclass=function (name) { return "font"; } }); </script>
<body ng-app="myapp" ng-controller="myctrl"> <input type="text" ng-model="query"/> <button ng-click="deleteall()">批量刪除</button> <table> <tr> <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"/></td> <td ng-click="haha1('nums'); desc=!desc" ng-class="addclass('nums')">id</td> <td ng-click="haha1('name'); desc=!desc" ng-class="addclass('nums')">名稱</td> <td ng-click="haha1('price'); desc=!desc" ng-class="addclass('nums')">價格</td> <td ng-click="haha1('kucun'); desc=!desc" ng-class="addclass('nums')">庫存</td> <td>操作</td> </tr> <tr ng-repeat="item in items | orderBy:order:desc | filter:query"> <td><input type="checkbox"ng-model="item.check" ng-click="itemcheck()"/></td> <td>{{item.nums}}</td> <td>{{item.name}}</td> <td>{{item.price | currency:'¥:'}}</td> <td>{{item.kucun}}</td> <td> <button ng-click="delete($index)">刪除</button> </td> </tr> </table> </body>
相關推薦
angularjs表格批量刪除和全選反選
<style> table { border: 1px solid #000; border-collapse: collapse; } tr, td { border: 1px solid #000; border-c
關於jquery全選反選 批量刪除的一點心得
批量刪除 rem cnblogs success 需要 rip 多說 reac == 廢話不多說直接上代碼: 下面是jsp頁面的html代碼: <table id="contentTable" class=""> <thead>
Recyclerview 實現多選,單選,全選,反選,批量刪除的功能的實現
不多說 demo傳送門https://download.csdn.net/download/godnessismymine/10774475 Recyclerview 實現多選,單選,全選,反選,批量刪除的步驟 1.在
關於Recyclerview 實現多選,單選,全選,反選,批量刪除的功能的實現
效果圖如下: Recyclerview 實現多選,單選,全選,反選,批量刪除的步驟 1.在Recyclerview佈局中新增上底部的全選和反選按鈕,刪除按鈕,和計算數量等控制元件 2.這裡選中的控制元件沒有用checkbox來做,用的是im
購物車修改刪除 全選反選批量刪除查詢排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
【HTML5】頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選
input 遍歷 ble 操作 warn clas type pre pen 頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選 頁面效果圖如下 html頁面代碼 <!DOCTYPE html> <html>
javascript教程系列41:表格全選反選,經典案例詳解
註冊事件 tag rap 優化 document iphone8 char value ipad <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g
批量修改樣式及全選反選
body his height lec spa utf ID true 商家 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
js版本的全選 反選 和全不選
這個以後做批量刪除之類的時候應該會用到 先記錄下來 <button id="b1">全選</button> <button id="b2">反宣</button> <button id="b3">全
後臺系統管理表格的全選,反選,查詢,選中行;
一.後臺系統管理表格的全選,反選,查詢,選中行 1:html <input type="text" id="username"><button>查詢</button> <button id="btnFx">反選</button
購物車兩個Adaper,可以刪除,全選反選,數量加減,通過RecycleView巢狀實現
1activity_main.xml主頁面佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro
購物車一個Adaper,可以刪除,全選反選,數量加減
1activity_main.xml頁面佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schem
jQuery(刪除,新增,批量刪除,全選,全不選)案例
//獲取table物件 var ta=document.getElementById("ta"); //獲取checked物件 var cb=document.getElement
jquery實現全選,反選,不選和提交按鈕
我的一個php檔案: <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" s
jquery全選/取消全選(反選)/單選操作以及獲取值常見用法和錯誤-jquery prop()函式使用教程
用原生態的JavaScript操作頁面上的一組checkbox全選/取消全選,邏輯很簡單,實現程式碼也不難寫。但使用jQuery實現則非常簡單,程式碼很簡潔-write less,do more! jquery版本:1.9 先看看HTML程式碼,很簡單的操作框 &l
屬性動畫+購物車+全選反選+選中計算價格+單個刪除
效果圖 匯入依賴 apply plugin: 'com.android.application' android { compileSdkVersion 26 buildToolsVersion "26.0.2" defaultConfig {
jquery複選框全選,反選和不選
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" sr
jquery實現全選/反選功能
click demo lar sim llc res rip rop 個數 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/h
vue全選反選demo
light product all method demo ges gin () tom <template> <div> <div class="xuanze"> <label><input
復選框全選反選問題
spring click springmvc mvc控制器 next put array console input <script type="text/javascript"> $(function(){ $("#dispatch_