Skip to content

Commit 3aa7046

Browse files
WscatsWscats
committed
单页面应用编辑数据
1 parent 744185a commit 3aa7046

File tree

3 files changed

+47
-12
lines changed

3 files changed

+47
-12
lines changed

‎view/detail1.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@
33
时间<abbr title="Phone">{{studentData.date}}</abbr>
44
<p>{{studentData.content}}</p>
55
</address>
6-
<button ng-click="deleteStu()" class="btn btn-primary">删除</button>
6+
<button ng-click="deleteStu()" class="btn btn-primary">删除</button>
7+
8+
<a class="btn btn-primary" ng-href="#/edit/{{studentData.id}}">编辑</a>

‎view/home1.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<li>第{{studentData[1].id}}同学是：{{studentData[1].name}}</li>
1313
<li>第{{studentData[2].id}}同学是：{{studentData[2].name}}</li>
1414
</ul>-->
15+
<meta charset="utf-8" />
1516
<table class="table table-striped">
1617
<tr>
1718
<th>序号</th>

‎view/route3.html

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
</head>
1212

1313
<body>
14+
<header>这里是头部</header>
1415
<!--在这里加一个ng-view的指令-->
15-
<div ng-view=""></div>
16+
<div ng-view="">
17+
<!--innerHtml-->
1618
</body>
1719
<script>
1820
var app = angular.module('angularRoute', ['ngRoute']);
@@ -31,27 +33,38 @@
3133
}).when('/add', {
3234
controller: 'addCtrl',
3335
templateUrl: 'add1.html'
36+
}).when('/edit/:number', {
37+
controller: 'editCtrl',
38+
templateUrl: 'edit1.html'
3439
})
3540
})
3641
//路由就是#这个符号加这个字符串/home——>#/home
37-
app.controller('homeCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
42+
app.controller('homeCtrl', ['$scope', '$rootScope', 'instance', '$http', function($scope, $rootScope, instance, $http) {
3843
//利用$rootScope交换数据
3944
$rootScope.exchange = '123';
4045
$scope.name = '123';
4146
//$http读后台数据回来
4247
$scope.studentData = studentData;
48+
//instance.name = '123';
49+
instance.name = 'yao';
50+
console.log(instance);
51+
$http.get('http://127.0.0.1/angular/baiduApi.php').success(function(data) {
52+
console.log(data)
53+
})
4354
}])
4455

45-
app.controller('detailCtrl', ['$scope', '$rootScope', '$routeParams', function($scope, $rootScope, $routeParams) {
56+
app.controller('detailCtrl', ['$scope', '$rootScope', '$routeParams', 'instance', function($scope, $rootScope, $routeParams, instance) {
4657
console.log($routeParams.number);
4758
$scope.studentData = studentData[$routeParams.number];
48-
$scope.deleteStu = function(){
49-
studentData.splice($routeParams.number,1);
50-
window.location.href="#/home";
59+
$scope.deleteStu = function() {
60+
studentData.splice($routeParams.number, 1);
61+
window.location.href = "#/home";
5162
}
63+
console.log(instance.name);
5264
}])
5365

54-
app.controller('addCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
66+
app.controller('addCtrl', ['$scope', '$rootScope', '$location', 'instance', function($scope, $rootScope, $location, instance) {
67+
console.log(instance);
5568
$scope.name = '123';
5669
//从input输入框拿拿学生名字
5770
$scope.insertStuName;
@@ -66,13 +79,32 @@
6679
//studentData.push()
6780
//插入数据
6881
studentData.push(obj);
69-
window.location.href="#/home";
82+
//window.location.href = "#/home";
83+
$location.path('home');
7084
}
7185
}])
7286

7387
app.controller('indexCtrl', ['$scope', function($scope) {
7488
$scope.name = '123';
7589
}])
90+
91+
app.controller('editCtrl', ['$scope', '$routeParams','$location', function($scope, $routeParams,$location) {
92+
$scope.studentData = studentData[$routeParams.number];
93+
$scope.edit = studentData[$routeParams.number].content;
94+
$scope.submitEdit = function(){
95+
studentData[$routeParams.number].content = $scope.edit;
96+
//返回我们学生的detail页
97+
$location.path('detail/'+$routeParams.number);
98+
}
99+
}])
100+
101+
app.service('instance', [function() {
102+
var obj = {}
103+
obj['add'] = function(a, b) {
104+
return a + b;
105+
}
106+
return obj;
107+
}])
76108
</script>
77109
<!--<script src=""></script>
78110
<img src="" />
@@ -83,17 +115,17 @@
83115
id: 0,
84116
name: '姚同学',
85117
date: new Date(),
86-
content:'在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。',
118+
content: '在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。',
87119
}, {
88120
id: 1,
89121
name: '晨同学',
90122
date: new Date(),
91-
content:'在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！',
123+
content: '在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！',
92124
}, {
93125
id: 2,
94126
name: '李同学',
95127
date: new Date(),
96-
content:'Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。',
128+
content: 'Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。',
97129
}]
98130
</script>
99131

0 commit comments

Comments
 (0)