AngularJS route与table表单
来源：互联网 发布：淘宝网小众女鞋店 编辑：程序博客网 时间：2024/06/05 08:45
首页 路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .clear { content: ""; display: block; clear: both; } header { width: 100%; height: 200px; text-align: center; line-height: 200px; background: #1BA2E0; color: white; font-size: 30px; } aside { background: greenyellow; width: 15%; height: 550px; float: left; } ul li a { text-decoration: none; font-size: 25px; } ul li { list-style: none; padding: 20px; } article { width: 85%; height: 550px; float: right; background: wheat; } .home_ul li img { width: 200px; height: 150px; } .home_ul li { float: left; } .colors { color: red; } .top { display: inline-block; width: 0px; height: 0px; border: 10px solid transparent; border-top: 10px solid red; } .base { display: inline-block; height: 0px; width: 0px; border: 10px solid transparent; border-bottom: 10px solid red; } </style> <script src="../angular-1.5.5/angular.min.js"></script> <script src="../angular-1.5.5/angular-route.js"></script> <script> angular.module("myapp", ["ngRoute"]) .config(function ($routeProvider) { $routeProvider.when("/home", { templateUrl: "pages/home.html", controller: "homeCtrl" }).when("/forum", { templateUrl: "pages/forum.html", controller: "forumCtrl" }).when("/tribe", { templateUrl: "pages/tribe.html" }).when("/message", { templateUrl: "pages/message.html" }) }) .controller("homeCtrl", function ($scope, $http) { $scope.name = "Dabin首页"; $http({ url: "shouye.json" }).then(function (data) { console.log(data); $scope.data = data.data; }) }) .controller("forumCtrl", function ($scope) { $scope.arr = [{ ID: "1234", name: "ipad", price: 3.400, count: 10, cun: 1, check: false }, { ID: "1244", name: "aphone", price: 6.400, count: 100, cun: 1, check: false }, { ID: "1254", name: "mypad", price: 4.400, count: 20, cun: 1, check: false }, { ID: "1264", name: "zpad", price: 8.400, count: 130, cun: 1, check: false }]; //删除单个 $scope.shanchu = function (index) { $scope.arr.splice(index, 1) } //排序 $scope.paixu = function (values) { $scope.order = values if ($scope.order == values) { $scope.judge = !$scope.judge } else { $scope.judge = false; } } //颜色 $scope.addclass = function (values) { if ($scope.order == values) { return "colors" } } //三角 $scope.traingle = function (values) { if ($scope.order == values) { if ($scope.judge == true) { return "base" } else { return "top" } } } //全部选中 $scope.quanxuans = function () { if ($scope.quanxuan == true) { for (var i = 0; i < $scope.arr.length; i++) { $scope.arr[i].check = true; } } else { for (var i = 0; i < $scope.arr.length; i++) { $scope.arr[i].check = false; } } } //选中每个 $scope.danxuans = function () { var flag = 0; for (var i = 0; i < $scope.arr.length; i++) { if ($scope.arr[i].check == true) { flag++; } } if (flag == $scope.arr.length) { $scope.quanxuan = true } else { $scope.quanxuan = false } } //删除全部 $scope.piliang = function () { if ($scope.quanxuan == true) { $scope.arr = []; } else { //批量删除 for (var i = $scope.arr.length - 1; i >= 0; i--) { if ($scope.arr[i].check == true) { $scope.arr.splice(i, 1); } } } } //添加到购物车 $scope.items = []; var numbers = 0; var IDs = []; $scope.shopping = function (ID) { for (var i = 0; i < $scope.arr.length; i++) { if ($scope.arr[i].ID == ID) { if (IDs[i] == ID) { $scope.arr[i].count -= 1; for (var j = 0; j < $scope.items.length; j++) { if ($scope.items[j].id == ID) { $scope.items[j].number++; } } } else { IDs[i] = ID; console.log(IDs[i]); $scope.arr[i].count -= 1; $scope.items.push({ "id": $scope.arr[i].ID, "name": $scope.arr[i].name, "price": $scope.arr[i].price, "number": $scope.arr[i].cun, check: false }) } } } } // 单个结算 $scope.jiesuai = function (index) { $scope.items.splice(index, 1) } //全部结算选择 $scope.quanmais = function () { if ($scope.quanmai == 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.allnumber = 0; $scope.danmai = function () { var flag = 0; for (var i = 0; i < $scope.items.length; i++) { if ($scope.items[i].check == true) { flag++; $scope.allmoney(); } } if (flag == $scope.items.length) { $scope.quanmai = true } else { $scope.quanmai = false } } //总金额 $scope.allmoney = function () { var money = 0; for (var i = 0; i < $scope.items.length; i++) { if ($scope.items[i].check == true) { money += $scope.items[i].number * $scope.items[i].price } } return money; } }) </script></head><body ng-app="myapp"><header>Dabin首页</header><section class="clear"> <aside> <ul> <li><a href="#home">首页</a></li> <li><a href="#forum">技术论坛</a></li> <li><a href="#tribe">部落</a></li> <li><a href="#message">留言</a></li> </ul> </aside> <article ng-view=""></article></section></body></html>
home页<h2>{{name}}</h2><ul class="home_ul"> <li ng-repeat="item in data"> <img ng-src="{{item.img}}"> <p>{{item.title}}</p> </li></ul>
forum页<style> .forum_header { height: 50px; content: ""; display: block; clear: both; } .forum_header input { float: left; } .forum_header button { float: right; } table { margin-left: 200px; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; } tr { text-align: center; }</style><div class="forum_header"> <input type="text" placeholder="请输入关键字" ng-model="keyword"> <button ng-click="piliang()">批量删除</button></div><div> <table> <tr> <th><input type="checkbox" ng-model="quanxuan" ng-click="quanxuans()"></th> <th ng-click="paixu('ID')" ng-class="addclass('ID')">商品编号 <span ng-class="traingle('ID')"></span></th> <th ng-click="paixu('name')" ng-class="addclass('name')">商品名称 <span ng-class="traingle('name')"></span></th> <th ng-click="paixu('price')" ng-class="addclass('price')">商品价格 <span ng-class="traingle('price')"></span> </th> <th ng-click="paixu('count')" ng-class="addclass('count')">商品库存 <span ng-class="traingle('count')"></span> </th> <th>商品操作</th> <th>添加到购物车</th> </tr> <tr ng-repeat="item in arr|filter:keyword:false|orderBy:order:judge"> <td><input type="checkbox" ng-click="danxuans()" ng-model="item.check"></td> <td>{{item.ID}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.count}}</td> <td> <button ng-click="shanchu($index)">删除</button> </td> <td> <button ng-click="shopping(item.ID)">购物车</button> </td> </tr> </table></div><div class="shopCart"> <h2>购物车</h2> <table> <tr> <th><input type="checkbox" ng-model="quanmai" ng-click="quanmais()"></th> <th>序号</th> <th>商品</th> <th>数量</th> <th>价格</th> <th>结算</th> </tr> <tr ng-repeat="item in items"> <td><input type="checkbox" ng-model="item.check" ng-click="danmai()"></td> <td>{{$index}}</td> <td>{{item.name}}</td> <td>{{item.number}}</td> <td>{{item.price*item.number}}</td> <td> <button ng-click="jiesuai($index)">结算</button> </td> </tr> </table> <p>总数量:{{allnumber}}</p> <p>总金额:{{allmoney()}}</p> <p> <button>总结算</button> </p></div>
阅读全文
1 0
- AngularJS route与table表单
- AngularJS 路由：ng-route 与 ui-router
- AngularJS 路由：ng-route 与 ui-router
- angularJs 中 ng-route与ui-router路由的区别
- angularJS的$route服务
- angularJs-route路由详解
- AngularJS $route路由
- angularjs ui-route
- angularJS 路由 ng-route
- Angularjs ng-route用法
- AngularJS表单的查询与增加
- Linux Route table configure
- AngularJS 表单
- AngularJS 表单
- AngularJS 表单
- AngularJS 表单
- AngularJs 表单
- AngularJs 表单
- 工作日记（一）
- Apache Bench安装与使用
- android studio gradle构建出错
- First blog
- c# 判断一个字符串列表中是否已经包括指定字符
- AngularJS route与table表单
- DQL数据库查询语言
- Selenium学习二——自动登陆163邮箱并发送邮件
- 自定义ViewGroup显示历史搜索
- keepalived高可用
- HDU 3715 Go Deeper（二分+2-SAT总结）
- 交叉编译Linux arm
- 面试题39：二叉树的深度
- Merge Two Sorted Lists--LeetCode
