本文档通过一个实例展示了如何利用AngularJS实现网页路由配置及控制器功能，包括数据绑定、过滤器、排序等功能，帮助读者理解AngularJS在实际项目中的应用。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
//创建总的控制器
var app=angular.module("myapp",["ngRoute"]);
//为路由设置的
app.config(["$routeProvider",function($routeProvider){
$routeProvider
//获取索要插入的页面 路径 templateUrl获取页面的名称
.when("/shouye",{templateUrl:"shouye.html"})
.when("/xinwen",{
controller:"xinwen",
templateUrl:"xinwen.html"})
.when("/chaxun",{templateUrl:"chaxun.html"})
.when("/xingcheng",{templateUrl:"xingcheng.html"})
.when("/youxi",{templateUrl:"youxi.html"})
.otherwise({redirectTo:"/shouye"});
}]);
//新闻的控制器必须使用同一个控制器
app.controller("xinwen",function($scope){
$scope.goods = [
{Bol:"false","id":1234,"name":"ipad","price":3400000,"number":10},
{Bol:"false","id":1244,"name":"aphone","price":640000,"number":100},
{Bol:"false","id":1334,"name":"mypad","price":440000,"number":20},
{Bol:"false","id":8234,"name":"zpad","price":840000,"number":130},
];
//
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.key = '';
//删除
$scope.deletes =function(name){
var p;
for( index in $scope.goods){
p = $scope.goods[index];
if( p.name == name){
$scope.goods.splice(index,1);
}
}
};
$scope.delall =function(){
//alert("sasd");
$scope.goods.splice($scope.goods);
};
$scope.togg =function(tit){
$scope.title = tit;
$scope.desc = !$scope.desc;
};
});
</script>
</head>
<body ng-app="myapp">
<center>
<div style="width: 1000px; height: 50px; align-content: center;
background: cornflowerblue; padding-top: 2px;"><h2>标题</h2></div>
<br />
<table border="1" cellpadding="0" cellspacing="1" width="1000px" height="500px" >
<tr align="center">
<td width="100px"><a href="#/shouye">首页</a></td>
<td colspan="4" rowspan="5">
<div ng-view>
</div>
</td>
</tr>
<tr align="center">
<td><a href="#/xinwen">新闻</a></td>
</tr>/
<tr align="center">
<td><a href="#/chaxun">查询</a></td>
</tr>
<tr align="center">
<td><a href="#/xingcheng">行程</a></td>
</tr>
<tr align="center">
<td><a href="#/youxi">游戏</a></td>
</tr>
</table>
</center>
</body>
</html>
//索要插入的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>week</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
</script>
</head>
<body ng-app="myapp" ng-controller="xinwen">
<center>
<table cellpadding="10" cellspacing="0" border="1">
<tr>
<th><input class="form-control" type="text" ng-model="key" placeholder="请输入关键字..."/></th>
<th colspan="5" align="right" ng-click="delall()"><font color="azure"></font><button style="background: red; ">批量操作</button></font></th>
</tr>
<tr>
<th ng-click="togg('Bol')"><input type="checkbox"></th>
<th ng-click="togg('id')" ng-click="ss()">商品编号▼</th>
<th ng-click="togg('name')">商品名称▼</th>
<th ng-click="togg('price')">商品价格▼</th>
<th ng-click="togg('number')">商品库存▼</th>
<th>数据操作</th>
</tr>
<tr ng-repeat="x in goods | filter: {name: key} | orderBy: title : desc">
<td align="center"><input type="checkbox"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price | currency:"(RMB)"}}</td>
<td>{{x.number}}</td>
<td><span ng-click="deletes(x.name)"><font color="azure"></font><button style="background: orange; ">删除</button></font></span></td>
</tr>
</table>
</center>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
