AngularJS项目实战(总结)

AngularJS实战中

*.html部分

搜索：

                                                                                                                                                  序号                                                     病人信息                                                 手册号/病案号                                                     就诊类别                                                     挂号时间                                                     接诊时间                                                     接诊医生                                                                                                                                                                                                           {{$index+1}}                                                        {{regInfo.patientName}} {{regInfo.genderName}} {{regInfo.age}}岁                                                        接诊                                                                                                                {{regInfo.anamNo?'病':'门'}} {{regInfo.anamNo?regInfo.anamNo:regInfo.patiNo}}                                                       {{regInfo.regTypeName}}                                                        {{regInfo.regDate|date:'yyyy-MM-dd HH:mm:ss'}}                                                                                                                                                                                                                                                      

// ng-model 绑定filter.any(在ng-repeat中直接使用filter: filter.any，在对应的input框中输入循环中查找到的相应的属性名，即可找出对应信息)

//ng-click='sortByType("regSerial")'>病人信息属性名regSerial为是实体类中的一个属性名，该功能为点击病人信息，根据regSerial（病人就诊时间升序）

 *.JS部分

// 排序 $scope.sort='regSerial'; $scope.asc=false; $scope.sortByType=function(type){ $scope.sort=type; $scope.asc=!$scope.asc; } //angularJS判断

由于angularjs不支持if-else结构，所以判断的写法如下（比较实用的两种方法）：

1.用三目运算符：（本例中使用的就是该方法，个人认为在判断单条的情况下比较方便，如果要处理的结果太多，效果可能不理想。。。）

{{regInfo.anamNo?'病':'门'}} {{regInfo.anamNo?regInfo.anamNo:regInfo.patiNo}

2.使用ng-if(angularJS 1.1.5以后版本有效)：

例如：

门诊加号

//在ng-click中可以传递多个方法或参数

例一：传递多个参数(用逗号间隔)：

对应的js文件：

例一：

function outpatientListCtrl($scope, $filter, $modal, $log, $http, $q, $timeout,$rootScope,$ocLazyLoad) {

$scope.searchRegPatiInfoById = function(noNo,patientName) {

相应的方法；

}

}

例二：

function outpatientListCtrl($scope, $filter, $modal, $log, $http, $q, $timeout,$rootScope,$ocLazyLoad) {

$scope.searchRegPatiInfoById = function(noNo) {

相应的方法；

}

$scope.changeBgcolor= function(no) {

相应的方法；

}

}

注意：

1.在tr中添加点击的方法，传递的参数为AngularJs自带的$index属性默认值为0，循环时{{$index+1}}可以实现自增

2.ng-class='{"regPatientBg":true}'当属性为true时，显示该样式

3.如果regPatientBg被覆盖，可以在后面添加td

*css样式

tr.regPatientBg td{ background-color: #e5effb; }

或

tr.regPatientBg { background-color: #e5effb; }

*html页面

{{$index+1}} {{alregInfo.patientName}} {{alregInfo.genderName}} {{alregInfo.age}}岁 {{alregInfo.anamNo?'门':'手'}}{{alregInfo.anamNo?alregInfo.anamNo:alregInfo.patiNo}} {{alregInfo.regTypeName}} {{alregInfo.regDate|date:'yyyy-MM-dd HH:mm:ss'}} {{alregInfo.receiveTime|date:'yyyy-MM-dd HH:mm:ss'}} {{alregInfo.receiveDocName}}  

*js部分

/点击添加背景 声明一个变量：setAllleftChose 将所有循环出的所有leftChose默认为false,当点击时间执行时，传递$index，在js中设为changeData，将选中的该行$index设置背景色

function outpatientListCtrl($scope, $filter, $modal, $log, $http, $q, $timeout,$rootScope,$ocLazyLoad) {     var setAllleftChose = function() {         angular.forEach($scope.leftChose, function(leftChose) {         leftChose.regPatientBg = false;         });     };          $scope.changeBgcolor = function(changeData) {     setAllleftChose();        $scope.leftChose[changeData]={'regPatientBg':true};     }

}

//表格第一行不变

注：实际上是两个表格相互嵌套，在移动时第一行永远显示在最上方，最重要的一点就是它的嵌套顺序

例：

                                                                                                                                                                                                                                                                                              序号                                                                                                                                                                                                               病人信息                                                                                                                                                            手册号/病案号                                                    就诊类别                                                    挂号时间                                                    接诊时间                                                    接诊医生                                                                                                                                                                                                                                           {{$index+1}}                                                    {{alregInfo.patientName}} {{alregInfo.genderName}} {{alregInfo.age}}岁                                                                                                         {{alregInfo.anamNo?'门':'手'}}{{alregInfo.anamNo?alregInfo.anamNo:alregInfo.patiNo}}                                                     {{alregInfo.regTypeName}}                                                     {{alregInfo.regDate|date:'yyyy-MM-dd HH:mm:ss'}}                                                     {{alregInfo.receiveTime|date:'yyyy-MM-dd HH:mm:ss'}}                                                     {{alregInfo.receiveDocName}}                                                                                                                    

该目录结构为：

开发中可借鉴的相关文档：

http://www.runoob.com/jquery/jquery-plugin-validate.html

http://v3.bootcss.com/javascript/#modals