Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 744185a

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /