AngularJS+清空購物車+全選+sort排序

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的購物車</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        var data=[{
                done 
:false,
                name:"小米",
                price:666,
                count:1,
            }, {
                done:false,
                name:"華為",
                price:888,
                count:1,
            },{
                done:false,
                name:"蘋果",
                price 
:299,
                count:1,
            },{
                done:false,
                name:"小辣椒",
                price:555,
                count:1,
            },{
                done:false,
                name:"堅果",
                price:1999,
                count:1,
            }
        ]
        myapp 
.controller("myCtrl",function ($scope) {
            //宣告
$scope.data=data;
            $scope.price=0;
            //清空購物車
$scope.deleteAll=function () {
                var aa=confirm("你是否確定清空購物車?");
                if(aa==true) {
                    $scope.data.length=0;
                }
            }
            //全選按鈕
$scope.gou=function () {
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.checkAll==true) {
                        $scope.data[i].done=true;
                    } else {
                        $scope.data[i].done=false;
                    }
                }
                $scope.numprice();
            }
            //勾選總價
$scope.numprice=function () {
                $scope.price=0;
                for(var i=0;i<$scope.data.length;i++) {
                    if($scope.data[i].done==true) {
                        $scope.price+=$scope.data[i].count*$scope.data[i].price;
                    }
                }
            }
            //數量-
$scope.min=function (index) {
                $scope.data[index].count--;
                $scope.numprice();
                if ($scope.data[index].count <= 0) {
                    $scope.data[index].count=0;
                }
            }
            //數量+
$scope.max=function (index) {
                $scope.data[index].count++;
                $scope.numprice();
            }
            //單擊刪除
$scope.delete=function (index) {
                var aa=confirm("你是否確定將選定的商品移出購物車?");
                if(aa==true) {
                    $scope.data.splice(index,1);
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <h3>我的購物車</h3>
    <button ng-click="deleteAll()">清空購物車</button>
    <table  border="soild 1px #000" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
            <th><input type="checkbox" ng-click="gou()" ng-model="checkAll">全選</th>
            <th>name</th>
            <th>price</th>
            <th>number</th>
            <th>totalPrice</th>
            <th>option</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td><input type="checkbox" ng-model="item.done" ng-click="numprice()"></td>
            <td>{{item.name}}</td>
            <td>{{item.price|currency:'￥'}}</td>
            <td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="max($index)">+</span></td>
            <td>{{item.price*item.count|currency:'￥'}}</td>
            <td><button ng-click="delete($index)">刪除</button></td>
        </tr>
        </tbody>
    </table>
    <div>商品總價:<span>{{price|currency:'￥'}}</span></div>
</body>
</html>

//sort排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app = angular.module("myapp",[]);
        app.controller("mycont",function ($scope) {
            $scope.data = [{
                "name":"zs",
                "age":"20",
                "sex":"boy",
                "salary":"15000"
},{
                "name":"ls",
                "age":"22",
                "sex":"boy",
                "salary":"13000"
},{
                "name":"ww",
                "age":"18",
                "sex":"girl",
                "salary":"12000"
}];
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="mycont">
    <input type="text" ng-model="find"><br><br>
    <table cellspacing="0" cellpadding="10" border="soild 1px #000">
        <thead>
        <tr>
            <th ng-click="sort(name)">姓名</th>
            <th ng-click="sort(age)">年齡</th>
            <th ng-click="sort(sex)">性別</th>
            <th ng-click="sort(salary)">薪資</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.salary}}</td>
        </tr>
        </tbody>
    </table>
    <p></p>
</body>
</html>

AngularJS+清空購物車+全選+sort排序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

AngularJS--購物車全選/取消全選功能實現

剛學習angularJS，於是練習寫了一個類似於購物車的全選/取消全選的功能，主要實現的功能有： 1、勾選全選checkbox，列表資料全部被勾選，取消同理，用ng-model實現雙向繫結； 2、選中列表中的所有checkbox，全選也會被勾選；（這裡我想到的方法是給

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

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

購物車全選

base 請求參數 expires tab connect 用戶 response json span 1. 後端接口設計請求方式： PUT /cart/selection/ 請求參數： JSON 或表單參數類型是否必須說明 selected bool 是

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

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

angular4實現購物車全選、反選、單選功能

<div class="items" *ngFor="let item of data; let i = index;"> <input type="checkbox" name="checkSingle[]" class="my_chec

使用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>

jsp，el表示式，會話管理，cookie，session技術，session的建立和銷燬/清空購物車

第一部分：jsp入門和el表示式入門 1、jsp的入門 1.1 什麼是jsp：（1）sun公司用於動態網站開發技術 servlet ，因為使用servlet如果向頁面輸出內容很麻煩，有了jsp，使用jsp向頁面輸出內容很方便，jsp就是servl

ecshop退出登入會清空購物車的bug優化，最完美解決方法

ecshop退出登陸後，會清空購物車，大家都應該知道有這樣的勉強算bug的問題。網上類似的教程相當多，但都有問題，說句不好聽的，算是引新手入歧途！總結網上方法如下： 1、修改init.php，把sess_id繫結ip的。老楊點評：各種紊亂不解釋。 2、修改cls_session.php，讓use

angularjs的查詢，全選，批量刪除

/*定義陣列*/ var data=[ { "name":"zs", "age":"18", "sex":"girl", "salary":"18000

AngularJs實現checkbox的全選、全取消

HTML端的關鍵程式碼 <thead> <tr> <th style="wid

html angular購物車全選+全刪+批量刪除+單獨刪除+模糊查詢+篩選價格區間

var app = angular.module("myApp", []); app.controller("myController", function($scope) { $scope.user = [{ checked: false, id: "1324"

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

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

Newbe.Claptrap 框架入門，第二步 —— 簡單業務，清空購物車

接上一篇 Newbe.Claptrap 框架入門，第一步 —— 建立專案，實現簡易購物車，我們繼續要了解一下如何使用 Newbe.Claptrap 框架開發業務。通過本篇閱讀，您便可以開始嘗試使用 Claptrap 實現業務了。開篇摘要本篇，我通過實現 “清空購物車” 的需求來了解一

angularjs購物車，排序，篩選，全選，刪除，確認是否刪除

<html lang="en"> <head> <meta charset="UTF-8"> <title>第三週週考</title> <script src="angular1.4.

jQuery 複選框全選和清空

html程式碼： <div class="checkbox-custom" style="height:32px;line-height:32px;"> <input id="Appleid" name="Apple" class="checkboxstyle" type="

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

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

python ttk Treeview的插入、清空、各種點選事件、獲取條目值、標題單擊排序

昨天整了一天Tkinter的treeview，發現中文的教程乃至提問都很少，其中兩個問題的解決都是靠steakoverflow上找到的…… 在這裡放出來我遇到並解決的問題，大家以後可能遇到的話就能省點事了~ 插入方法： import tkinter from tki

jQuery清空復選框，下拉框，輸入框

下拉 div edi 賦值 rop 更改 check sele bsp 在做前端頁面是有時需要清空或者更改一些input輸入框，select下拉框，checkbox復選框，還有普通div，span包裹的值，特別是使用ajax的時候，更需要這些清空id為靜態aaa的 inp

AngularJS+清空購物車+全選+sort排序

相關推薦