scope。toggle = function toggle() {

                  scope。showMe = !scope。showMe;

                  accordionController。gotOpened(scope);

};}};};

这个页面为网站访问用户提供常见问题的帮助，例如产品的购买方式和配送方式以及售后服务的咨询。使用了自定义指令完成了手风琴效果。用户点击其中任意一个标题后会展开相应的内容主体，点击其他标签时就会关闭之前展开的其他标题内容。这种设计方式在完成了友好的用户交互的同时增加了单页面可显示内容，方便了用户能够快速找到自己的问题解答。

4。1。5问卷调查

（1）页面概述

为登录用户提供问卷调查功能，通过问卷调查功能向企业反馈问题。

（2）详细介绍

图 4。12 问卷调查

HTML

<p ng-controller="questionCtrl" class="question">

<form class="container-fluid">

<p class="row col-sm-offset-1 col-sm-10" ng-repeat="question in questions">

<p class="row question-title"> <p><small>Q{{$index+1}}。</small>{{question。title}}</p></p>

<p class="row question-body">

<p ng-repeat="q in question。qt">

<label>

<input  type="radio" name="q{{$parent。$index+1}}">{{q}}</label>

</p></p><hr></p></form></p>

利用angular的ng-repeat指令快速完成页面同样式内容的布局。这是用户问卷调查页面，登录用户可以通过完成问卷调查向企业反馈用户信息，帮助企业可以更迅速的了解用户需求，进行相应业务调整。用户完成后点击提交按钮完成表单的提交。

4。2账号管理模块设计

4。2。1用户注册

（1）页面概述

为未注册用户提供注册服务。

（2）详细介绍

图 4。13 用户注册界面

HTML

<p ng-controller="registerCtrl" class="register">

<p class="page-header">

<h1>Welcome<small><a href="#"> tata。top</a></small></h1>

</p>

<form class="form-horizontal vcenter" role="form">

<p class="form-group">

<label class="control-label col-sm-2 col-sm-offset-2" for="username">用户名：</label>

<p class="col-sm-4">

<input class="form-control" type="text" name="username" ng-model="username" ng-blur="usernameCheck()" ng-change="usernameChange()" placeholder="请使用大小写英文、数字或者下划线">

</p>

<p ng-cloak  class="ng-cloak">

<img class="col-sm-1 check" src="img/yes.png" ng-show="usernameValid=='yes'">

<img class="col-sm-1 check animated rubberBand" src="img/no.png"  ng-show="usernameValid=='no'">

</p> </p>

<p class="form-group">

<label class="control-label col-sm-2 col-sm-offset-2" for="passwd">密码：</label>

<p class="col-sm-4">

<input class="form-control" type="password" name="passwd" ng-model="passwd" ng-blur="passwdCheck()" ng-change="passwdAgainCheck()" placeholder="最少输入6位密码">