Skip to content

Commit 744185a

Browse files
WscatsWscats
committed
单页面应用-》增删查
1 parent 7c66ace commit 744185a

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎view/add1.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<form>
2+
<div class="form-group">
3+
<label for="exampleInputEmail1">新增同学</label>
4+
<input ng-model="insertStuName" type="text" class="form-control" id="exampleInputEmail1" placeholder="输入同学的名字">
5+
</div>
6+
<div class="form-group">
7+
<label for="exampleInputPassword1">输入内容</label>
8+
<input ng-model="insertStuinfo" type="text" class="form-control" id="exampleInputPassword1" placeholder="输入同学的简介">
9+
</div>
10+
<button ng-click="submitStu()" type="submit" class="btn btn-default">Submit</button>
11+
</form>

‎view/detail1.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<address>
2+
<strong>名字{{studentData.name}}</strong><br>
3+
时间<abbr title="Phone">{{studentData.date}}</abbr>
4+
<p>{{studentData.content}}</p>
5+
</address>
6+
<button ng-click="deleteStu()" class="btn btn-primary">删除</button>

‎view/home1.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--进入到home1的页面
2+
<a ng-href="#/detail">利用$rootScope在控制器之间交换数据</a>
3+
<p>
4+
{{studentData}}
5+
</p>-->
6+
<!--ng-repeat-->
7+
<!--stu == studentData[n]-->
8+
<!--<ul>
9+
<li ng-repeat="stu in studentData">第{{stu.id}}同学是：{{stu.name}}</li>
10+
<br />
11+
<li>第{{studentData[0].id}}同学是：{{studentData[0].name}}</li>
12+
<li>第{{studentData[1].id}}同学是：{{studentData[1].name}}</li>
13+
<li>第{{studentData[2].id}}同学是：{{studentData[2].name}}</li>
14+
</ul>-->
15+
<table class="table table-striped">
16+
<tr>
17+
<th>序号</th>
18+
<th>名字</th>
19+
<th>时间</th>
20+
</tr>
21+
<tr ng-repeat="stu in studentData">
22+
<td>{{stu.id}}</td>
23+
<td><a ng-href="#/detail/{{stu.id}}">{{stu.name}}</a></td>
24+
<td>{{stu.date}}</td>
25+
</tr>
26+
</table>
27+
<a class="btn btn-primary" ng-href="#/add">新增</a>

‎view/route3.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html ng-app="angularRoute">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
8+
<script type="text/javascript" src="../js/angular.js"></script>
9+
<script type="text/javascript" src="../js/angular-route.js"></script>
10+
<link rel="stylesheet" href="../css/bootstrap.css" />
11+
</head>
12+
13+
<body>
14+
<!--在这里加一个ng-view的指令-->
15+
<div ng-view=""></div>
16+
</body>
17+
<script>
18+
var app = angular.module('angularRoute', ['ngRoute']);
19+
//这就是开始配置angular的路由
20+
app.config(function($routeProvider) {
21+
//when方法
22+
$routeProvider.when('/home', {
23+
//当路由更改为home的时候，显示home.html页面,并且该页面由homeCtrl控制
24+
controller: 'homeCtrl',
25+
templateUrl: 'home1.html'
26+
}).when('/detail/:number', {
27+
controller: 'detailCtrl',
28+
templateUrl: 'detail1.html'
29+
}).when('/index', {
30+
controller: 'indexCtrl'
31+
}).when('/add', {
32+
controller: 'addCtrl',
33+
templateUrl: 'add1.html'
34+
})
35+
})
36+
//路由就是#这个符号加这个字符串/home——>#/home
37+
app.controller('homeCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
38+
//利用$rootScope交换数据
39+
$rootScope.exchange = '123';
40+
$scope.name = '123';
41+
//$http读后台数据回来
42+
$scope.studentData = studentData;
43+
}])
44+
45+
app.controller('detailCtrl', ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams) {
46+
console.log($routeParams.number);
47+
$scope.studentData = studentData[$routeParams.number];
48+
$scope.deleteStu = function(){
49+
studentData.splice($routeParams.number,1);
50+
window.location.href="#/home";
51+
}
52+
}])
53+
54+
app.controller('addCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
55+
$scope.name = '123';
56+
//从input输入框拿拿学生名字
57+
$scope.insertStuName;
58+
//从input输入框拿拿学生信息
59+
$scope.insertStuinfo;
60+
$scope.submitStu = function() {
61+
var obj = {};
62+
obj.id = studentData.length; //3
63+
obj.name = $scope.insertStuName;
64+
obj.date = new Date();
65+
//console.log(studentData.length);
66+
//studentData.push()
67+
//插入数据
68+
studentData.push(obj);
69+
window.location.href="#/home";
70+
}
71+
}])
72+
73+
app.controller('indexCtrl', ['$scope', function($scope) {
74+
$scope.name = '123';
75+
}])
76+
</script>
77+
<!--<script src=""></script>
78+
<img src="" />
79+
<link />-->
80+
<script>
81+
//定义些数据 Jsonp
82+
var studentData = [{
83+
id: 0,
84+
name: '姚同学',
85+
date: new Date(),
86+
content:'在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。',
87+
}, {
88+
id: 1,
89+
name: '晨同学',
90+
date: new Date(),
91+
content:'在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！',
92+
}, {
93+
id: 2,
94+
name: '李同学',
95+
date: new Date(),
96+
content:'Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。',
97+
}]
98+
</script>
99+
100+
</html>

‎view/旋转木马.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div id="data" data-example-demo="456" e='123'></div>
9+
</body>
10+
<script>
11+
//旧的读取和设置方法
12+
var data = document.getElementById('data').getAttribute('data-example');
13+
var data1 = document.getElementById('data').getAttribute('e');
14+
//document.getElementById('data').setAttribute('fuck','love');
15+
16+
17+
//新的读取和设置方法
18+
//相当于docunment.getElementById
19+
//首先要获取这个节点，再去读这个dataset对象，然后用驼峰的方法把(data-)后面的变量读取出来
20+
var data2 = document.querySelector('#data').dataset.exampleDemo;
21+
//相当于document.getElementsByTagName
22+
var data3 = document.querySelectorAll('#data')[0].dataset.exampleDemo;
23+
//设置的(data-)值的方法
24+
document.querySelector('#data').dataset.exampleDemo = 'love';
25+
</script>
26+
</html>

0 commit comments

Comments
 (0)