AngularJS route与table表单
2017-09-21 19:02
316 查看
首页 路由
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angularjs表单验证checkbox
- AngularJs的表单验证
- angularjs的表单验证问题
- angularjs 利用filter进行表单查询及分页查询
- AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然
- struts2的form等表单布局问题，去掉其自动生成的<table><tr><td>标签
- angularJS表单验证
- angularJS1 提交form表单demo
- 论坛源码推荐（10.21）：灵活而强大的创建动态table-view表单，多功能自定义弹出菜单
- angularJs中ng-init,ng-trim及表单value与$scope数据提交差异分析
- AngularJs 表单验证
- 表单验证<AngularJs>
- AngularJS表单基础
- 关于文本域不能在form表单或table不能使用问题，现在用样式解决
- angularjs使用-----表单使用
- AngularJS表单验证开发案例
- angularjs使用ng-messages的注册表单实例
- Angularjs系列之表单验证
- table表单
- angularjs 文件上传 如何绑定file表单的change？