使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（6）

look_w

在 Web 浏览器中，您新修改的 New Talk 页面应当类似图 6 所示。
图 6.  自定义后的 New Talk 表单
如果对所做的更改感到满意，请打开 edit-talk.client.view.html 并执行相应的更改，如清单 12 所示。
清单 12. edit-talk.client.view.html

1 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

<div class="col-md-12">     <form class="form-horizontal" data-ng-submit="update()" novalidate>       <fieldset>         <div class="form-group">           <label class="control-label" for="name">Name</label>           <div class="controls">             <input type="text" data-ng-model="talk.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="talk.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="talk.presenter" id="name" 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="talk.slidesUrl" id="name" class="form-control"             placeholder="Slides Url">           </div>         </div>         <div class="form-group">           <input type="submit" value="Update" class="btn btn-default">         </div>         <div data-ng-show="error" class="text-danger">           <strong data-ng-bind="error"></strong>         </div>       </fieldset>     </form> </div>

请注意，用于编辑的 HTML 与之前修改的创建表单稍微有些不同。在编辑时，您已经有了一个 Talk 对象，因此                data-ng-model 属性将以完全限定的方式引用字段，比如用 talk.name 而不是                name。在 Web 浏览器中查看修改，如图 7 所示。
图 7.  自定义后的 Edit Talk 表单
view-talk.client.view.html 页面是对象的只读视图。用户在保存新的 Talk，更新现有的                Talk 或从列表页面中选择 Talk 后将来到该视图。如清单 13 所示做出修改。
清单 13. edit-talk.client.view.html

1 2 3 4 5 6

<div class="page-header">   <h1 data-ng-bind="talk.name"></h1>   <h2><em>by {{talk.presenter}}     <span ng-if="talk.slidesUrl !== '' ">[<a href="{{talk.slidesUrl}}">slides</a>]</span></em></h2>   <p>{{talk.description}}</p>               </div>

前面提到 slidesUrl 是可选字段。在视图页面中，您将使用 ng-if                指令有条件地显示字段（如果已填充）。在浏览器中查看页面，检查这一行为，如图 8 所示。
图 8. 自定义后的 View Talk 表单
List 视图是最后一个需要做出调整的视图。打开 list-talks.client.view.html 并如清单 14 所示进行修改。
清单 14. list-talks.client.view.html

1 2 3 4 5 6

<div class="list-group">     <a data-ng-repeat="talk in talks" data-ng-href="#!/talks/{{talk._id}}" class="list-group-item">     <h4 class="list-group-item-heading" data-ng-bind="talk.name"></h4>         <p><em>by {{talk.presenter}}</em></p>     </a> </div>

请注意，这里使用 data-ng-repeat 指令显示了服务器返回的 talk 列表中的每个                talk。在浏览器中查看结果，如图 9 所示。
图 9. 自定义后的 List Talks 表单