使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（5）
|
- UID
- 1066743
|
使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（5）
添加新字段以进行显示查看 public/modules/talks/views/。有四个字段与 CRUD 生命周期有关：
- create-talk.client.view.html
- edit-talk.client.view.html
- view-talk.client.view.html
- list-talks.client.view.html
打开 create-talk.client.view.html，如清单 10 所示。
清单 10. 生成的 create-talk.client.view.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <section data-ng-controller="TalksController">
<div class="page-header">
<h1>New Talk</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control"
placeholder="Name" required>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
|
将与 Name 有关的代码块复制三次，以便支持 Description、Presenter 和 slidesUrl，如清单 11 所示。我将 Description 字段设置为 textarea，而不是一个简单的文本字段。同样，我从 slidesUrl 字段移除了 required 属性，并将 input type 从 text 修改为 url。
清单 11. 更新 create-talk.client.view.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <section data-ng-controller="TalksController">
<div class="page-header">
<h1>New Talk</h1>
</div>
<div class="col-md-12">
<form class="form-horizontal" data-ng-submit="create()" novalidate>
<fieldset>
<div class="form-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" data-ng-model="name" id="name" class="form-control"
placeholder="Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="description">Description</label>
<div class="controls">
<textarea data-ng-model="description" id="description" class="form-control"
placeholder="Description" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label" for="presenter">Presenter</label>
<div class="controls">
<input type="text" data-ng-model="presenter" id="presenter" class="form-control"
placeholder="Presenter" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="slidesUrl">Slides</label>
<div class="controls">
<input type="url" data-ng-model="slidesUrl" id="slidesUrl" class="form-control"
placeholder="Slides Url">
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default">
</div>
<div data-ng-show="error" class="text-danger">
<strong data-ng-bind="error"></strong>
</div>
</fieldset>
</form>
</div>
</section>
|
|
|
|
|
|
|
