购物车

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车title>
    <link rel="stylesheet" type="text/css" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script type="text/javascript" src="angular.min.js">script>
    <script type="text/javascript" src="jquery-2.1.0.min.js" >script>

    <script type="text/javascript">
        angular.module('product',[])
            .factory('productList',function(){
                return [
                    {id:1234,name:'ipad',price:3400,num:10},
                    {id:1244,name:'aphone',price:6400,num:100},
                    {id:1334,name:'mypad',price:4400,num:20},
                    {id:8234,name:'zpad',price:8400,num:130}
                ]
            })
            .controller('productController',function ($scope,productList) {
                $scope.productList=productList;
                $scope.orderColumn='name';
                $scope.orderSign='-';
                $scope.sortProduct=function (sortColumn) {
                    $scope.orderColumn=sortColumn;
                    if($scope.orderSign=="-"){
                        $scope.orderSign=""
                    }else
                    {
                        $scope.orderSign="-"
                    }
                };
                $scope.delete=function(index){   //删除选中的一行
                    if(confirm("是否删除该商品")){
                        $scope.productList.splice(index-1,1);
                    }
                };
                $scope.deleteAll=function(index) {
                    var a=$(".checkthis");
                    var k=0;
                    for (var i=0;i<a.length;i++){
                        if(a[i].checked){
                            k=1;
                        }
                    }
                    if(k==0){
                        alert("请先选择删除的信息");
                    }else{
                        $scope.productList.splice(index);
                    }

                };

            });
nk


            script>
    <script type="text/javascript">
            $(function () {
                $("#checkAll").click(function () {
                    if(this.checked){
                        $("input[name='checkthis']:checkbox").each(function () {
                            $(this).attr("checked",true);
                        });
                    }else{
                        $("input[name='checkthis']:checkbox").each(function () {
                            $(this).attr("checked",false);
                        });
                    }
                });
            });
    script>

    <style>
        th:hover{
            color: red;
        }
    style>
head>
<body>
<div  class="container" ng-app="product" ng-controller="productController"  >
    <nav class="navbar navbar-default" role="navigation">

        <div >
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" ng-model="search" class="form-control" placeholder="输入关键字..." value="" />
                    <button class="btn btn-danger" ng-click="deleteAll(index)" style="margin-left:800px;position: relative;">批量删除button>
                div>
            form>
        div>
    nav>
    <table class="table">
        <thead>
        <tr>
            <th><input type="checkbox" name="checkAll" id="checkAll" value="">th>
            <th ng-click="sortProduct('id')" ng-class="{droup:orderSign==''}" >商品编号th>
            <th ng-click="sortProduct('name')" ng-class="{droup:orderSign==''}">商品名称th>
            <th ng-click="sortProduct('price')" ng-class="{droup:orderSign==''}">商品价格th>
            <th ng-click="sortProduct('num')" ng-class="{droup:orderSign==''}">商品库存th>
            <th >数据操作th>


        tr>
        thead>
        <tbody>
        <tr ng-repeat="item in productList|filter:{'name':search}|orderBy:(orderSign+orderColumn)">
            <td>
                <input type="checkbox" class="checkthis" name="checkthis" id="checkthis" value="" />
            td>

            <td>{{item.id}}td>
            <td>{{item.name}}td>
            <td>{{item.price|currency:'¥'}}td>
            <td>{{item.num}}td>
            <td>
                <button class="btn btn-warning" ng-click="delete($index)">删除button>
            td>
        tr>
        tbody>
    table>


div>

body>
html>

你可能感兴趣的:(购物车)