第一步：导入包文件并且声明
var app = angular.module("myApp", ['ngRoute']);
第二步//配置路由
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '',
})
.when("/news", {
templateUrl: 'news.html',
controller: 'newsController'
})
.when("/news", {
templateUrl: 'news.html',
controller: 'newsController'
})
.when("/query", {
templateUrl: 'query.html',
controller: 'queryController'
})
.when("/day", {
templateUrl: 'day.html',
controller: 'dayController'
})
.when("/team", {
templateUrl: 'team.html',
controller: 'teamController'
})
}]);
第三步：实现新闻页面的控制器
app.controller("newsController", function($scope) {
//模拟数据源
$scope.shopList = [{
id: 1,
title: "纯手工制作木质时钟精致家具装饰摆件",
price: 150,
num: 1,
state: false
}, {
id: 2,
title: "木质蓝牙音箱包邮实木家具装饰摆件",
price: 119,
num: 1,
state: false
}, {
id: 3,
title: "装饰木雕，独特趣味设计家具装饰摆件",
price: 120,
num: 1,
state: false
}];
//删除全部，批量删除
$scope.removeAll = function() {
var userNames = [];
for(index in $scope.shopList) {
if($scope.shopList[index].state == true) {
userNames.push($scope.shopList[index].title);
}
}
alert(userNames);
if(userNames.length > 0) {
if(confirm("是否删除选中项？")) {
for(i in userNames) {
var name = userNames[i]
for(i2 in $scope.shopList) {
if($scope.shopList[i2].title == name) {
$scope.shopList.splice(i2, 1);
}
}
}
}
} else {
alert("请选择删除项");
}
}
//全选
$scope.selectAll = false;
$scope.all = function(m) {
for(var i = 0; i < $scope.shopList.length; i++) {
if(m === true) {
$scope.shopList[i].state = true;
} else {
$scope.shopList[i].state = false;
}
}
}
});
//body中的内容
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<ul>
<li>
<a href="#/">首页</a>
</li>
<li>
<a href="#/news">新闻</a>
</li>
<li>
<a href="#/query">查询</a>
</li>
<li>
<a href="#/day">日程</a>
</li>
<li>
<a href="#/team">游戏</a>
</li>
</ul>
<!--首页的内部页面-->
<script type="text/ng-template" id="">
</script>
<!--新闻的内部页面-->
<script type="text/ng-template" id="news.html">
<table border="1" cellpadding="0" cellspacing="0">
<tr><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)" />趣艺工坊<button ng-click="removeAll()">批量删除</button></tr>
<tbody ng-repeat="shop in shopList">
<tr>
<td rowspan="5"><input type="checkbox" ng-model="shop.state" /></td>
<td rowspan="5">可以想象一下，<br />这里有图片</td>
<td colspan="3">{{shop.title}}</td>
</tr>
<tr>
<td colspan="3">{{shop.price | currency:'$'}}</td>
</tr>
<tr>
<td colspan="2"><button ng-click="shop.num=shop.num+1">+</button><span>{{shop.num}}</span><button ng-click="shop.num=shop.num-1">-</button></td>
<td><button ng-click="">删除</button></td>
</tr>
</tbody>
</table>
</script>
<!--查询的内部页面-->
<script type="text/ng-template" id="query.html">
<p>this is query</p>
</script>
<!--日程的内部页面-->
<script type="text/ng-template" id="day.html">
<p>this is day</p>
</script>
<!--游戏的内部页面-->
<script type="text/ng-template" id="team.html">
<p>this is 游戏</p>
</script>
<div ng-view=""></div>
</center>
</body>
网友评论