2. 程式人生 > >購物車修改刪除 全選反選批量刪除查詢排序

購物車修改刪除 全選反選批量刪除查詢排序

阿新 • • 發佈：2019-01-18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
        <script>
            var app=angular.module("myApp",[])
            app.controller("myCtrl",function($scope){
                $scope.products=[
                {"id":"80","name":"iphone","price":5400,state:false},
                {"id":"1200","name":"ipad mini","price":2200,state:false},
                {"id":"500","name":"ipad air","price":2340,state:false},
                {"id":"290","name":"ipad","price":1420,state:false},
                {"id":"910","name":"imac","price":15400,state:false}
                ]
                //刪除
                 $scope.de=function(name){
                    if(window.confirm("確定要刪除"+name+"嗎？")){
                        for(index in $scope.products){
                            if(name==$scope.products[index].name){
                                $scope.products.splice(index,1);
                            }
                        }
                    }
                }
                
                //全選、全不選
                $scope.selectAll = false;
                $scope.selectAllFun = function() {
                    if($scope.selectAll) {
                        for(index in $scope.products) {
                            $scope.products[index].state = true;
                        }
                    } else {
                        for(index in $scope.products) {
                            $scope.products[index].state = false;
                        }
                    }
                }
                
                
                //反選
                $scope.checkselAll = function() {
                    var flag = false;
                    for(index in $scope.products) {
                        if(!$scope.products[index].state) {
                            //滿足條件
                            flag = true;
                        }
                    }

                    if(flag) {
                        $scope.selectAll = false;
                    } else {
                        $scope.selectAll = true;
                    }
                }
                
                
                //批量刪除
                $scope.delselect = function() {
                    var selArr = [];
                    for(index in $scope.products) {
                        if($scope.products[index].state) {
                            selArr.push($scope.products[index].name)
                        }
                    }

                    if(selArr.length <= 0) {
                        alert("請先選擇");
                    } else {
                        if(window.confirm("確定要刪除嗎？")) {
                            for(index1 in selArr) {
                                for(index2 in $scope.products) {
                                    if(selArr[index1] == $scope.products[index2].name) {
                                        $scope.products.splice(index2,1);
                                    }
                                }
                            }
                        } else {

                        }
                    }
                }
                
                //修改
                $scope.up=function(name){
                    var pro=window.prompt("確定要修改嗎？");
                    if(pro!=null){
                    //    alert(pro);
                    for (index in $scope.products) {
                        if(name== $scope.products[index].name){
                            $scope.products[index].price=pro;
                        }
                    }
                    }
                    
                    
                    
                }
                
                
                
            })
    
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl" style="margin: 0px auto;">
        <h1 style="margin: 0px auto;">購物車</h1>
        產品名稱：<input type="text" placeholder="產品名稱" ng-model="search"/>&nbsp;&nbsp;&nbsp;&nbsp;
        排序：<select ng-model="paixu">
            <option value="">排序方式</option>
            <option value="id">id正序</option>
            <option value="-id">id逆序</option>
            <option value="price">價格正序</option>
            <option value="-price">價格逆序</option>
        </select>
        &nbsp;<input type="button" value="批量刪除" ng-click="delselect()"/>
        <table border="1px solid black" cellpadding="10px" cellspacing="0" width="500px" height="300px">
            <tr>
                <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></td>
                <td>產品編號</td>
                <td>產品名稱</td>
                <td>產品價格</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="p in products | filter:{name:search} | orderBy:paixu" >
                <td><input type="checkbox" ng-model="p.state" ng-click="checkselAll()"></td>
                <td>{{p.id}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
                <td><input type="button" value="刪除" ng-click="de(p.name)"><input type="button" value="修改" ng-click="up(p.name)"></td>
            </tr>
        </table>
    </body>
</html>

相關推薦

購物車修改刪除 全選反選批量刪除查詢排序

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>         <

關於jquery全選反選 批量刪除的一點心得

批量刪除 rem cnblogs success 需要 rip 多說 reac == 廢話不多說直接上代碼： 下面是jsp頁面的html代碼： <table id="contentTable" class=""> <thead>

批量修改樣式及全選反選

body his height lec spa utf ID true 商家 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Recyclerview 實現多選,單選,全選,反選,批量刪除的功能的實現

不多說 demo傳送門https://download.csdn.net/download/godnessismymine/10774475           Recyclerview 實現多選,單選,全選,反選,批量刪除的步驟 1.在

購物車兩個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

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

<style> table { border: 1px solid #000; border-collapse: collapse; } tr, td { border: 1px solid #000; border-c

關於Recyclerview 實現多選,單選,全選,反選,批量刪除的功能的實現

效果圖如下: Recyclerview 實現多選,單選,全選,反選,批量刪除的步驟 1.在Recyclerview佈局中新增上底部的全選和反選按鈕,刪除按鈕,和計算數量等控制元件 2.這裡選中的控制元件沒有用checkbox來做,用的是im

屬性動畫+購物車+全選反選+選中計算價格+單個刪除

效果圖 匯入依賴 apply plugin: 'com.android.application' android { compileSdkVersion 26 buildToolsVersion "26.0.2" defaultConfig {

【HTML5】頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選

input 遍歷 ble 操作 warn clas type pre pen 頁面點擊按鈕添加一行 刪除一行 全選 反選 全不選 頁面效果圖如下 html頁面代碼 <!DOCTYPE html> <html>

js購物車全選反選、商品價格統計

購物車全選 購物車價格計算 模仿淘寶購物車的全選全不選，根據選中的商品計算價格，指定店鋪選擇。以下是我自己在做H5頁面的時候整理出來的，想我一個純php的來寫成這樣也不容易。不完善的地方歡迎各位小夥伴指出~html代碼：<body> <header class="m

jquery實現購物車全選反選功能

 利用jquery實現購物車中全選（反選）換圖功能，具體程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta cont

使用Recyclerview巢狀實現購物車全選反選

  在drawable建立selector改變CheckBox外形 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/

購物車功能：使用jQuery實現購物車全選反選，單選，商品增刪，小計等功能

效果圖： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬購物車功能-jq</title>

仿購物車CheckBox的全選反選ListView中的checkbox

activity程式碼 public class MainActivity extends Activity { private CheckBox check_all; private ListView lView; private

Android_二級列表購物車之增刪改查,全選反選,加減器,價錢數量計算

第一步: 導依賴 Eventbus依賴: compile 'org.greenrobot:eventbus:3.1.1'gson依賴: compile 'com.google.code.gson:gson:2.8.2' OkHttp依賴: compile 'com.squa

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_

jQuery實現全選反選功能

ava -type func tex solid blog pan 原因 input 廢話不說，直接上代碼！ <html> <head> <meta http-equiv="Content-Type" content="text/html;