angularjs表格批量刪除和全選反選

阿新 • • 發佈：2019-01-11

<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表格批量刪除和全選反選

關於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_

angularjs表格批量刪除和全選反選

相關推薦