可参考文章：http://blog.csdn.net/renfufei/article/details/43061877
ng-repeat信息展示的核心：
【1】异步读取数据源 works，见代码一
【2】使用AngularJs控件绑定数据源，见代码三
ng-repeat="work in works "
ng-model="work.company"
ng-model="work.workplace"
【3】保存修改数据，在循环体内，可以将单条记录做形参传递给方法，从而实现保存，见代码二
ng-click="saveWork(work);"
代码一
1 //查看员工背景资料 2 $http({ 3 method : 'POST', 4 url : '/omss/viewEmpBackgroudById?id='+id 5 }).success(function(data, status, headers, config) { 6 $scope.status = status; 7 if (data.length != 0) { 8 $scope.employeeBg = (data[0]); 9 console.log("员工背景data："+JSON.stringify(data)) 10 //获取页面中下拉框的数据源 11 /*$scope.types =[ 12 {name:'正式员工',id:'1', xorder:'1'}, 13 {name:'劳务工', id:'22',xorder:'2'}, 14 {name:'实习生', id:'23',xorder:'3'} 15 ];*/ 16 //性别 17 $scope.genders =[ 18 {TITLE:'男',ID:'1', xorder:'1'}, 19 {TITLE:'女', ID:'2',xorder:'2'} 20 ]; 21 $scope.selectedbggender=(data[0]).bggender; 22 //循环多个工作经历 23 $scope.works=(data[0]).workList; //读取数据源 24 $scope.edus=(data[0]).eduList; 25 $scope.familys=(data[0]).familyList; 26 } 27 }).error(function(data, status, headers, config) { 28 $scope.data = data || "Request failed"; 29 $scope.status = status; 30 $scope.tips = '对不起，您的网络情况不太稳定。'; 31 });
代码二
1 2 3 /* 保存员工工作经历 4 */ 5 $scope.saveWork = function(work) { 6 console.log("进入saveWork........."); 7 var postJson = { 8 'id':work.id,//传递过来的work本来就带有的属性，只是页面未展示 9 'sid':work.sid,//传递过来的work本来就带有，只是页面未展示 10 'workbegindate':work.workbegindate, 11 'workenddate':work.workenddate, 12 'company':work.company, 13 'job':work.job, 14 'workplace':work.workplace, 15 'tel':work.tel, 16 'isout':work.isout, 17 'remark':work.remark, 18 }; 19 $http({ 20 method : 'POST', 21 url : '/omss/saveWork', 22 data : JSON.stringify(postJson) 23 }).success(function(data, status, headers, config) { 24 $scope.status = status; 25 console.log(data); 26 alert("保存成功"); 27 }).error(function(data, status, headers, config) { 28 $scope.data = data || "Request failed"; 29 $scope.status = status; 30 $scope.tips = '对不起，您的网络情况不太稳定。'; 31 }); 32 33 }; 34
代码三
1 <div class="space"></div> 2 <!-- toolbar --> 3 <div class="widget-toolbar"> 4 <a ng-click="reloadEmp();"> 5 <i class="ace-icon fa fa-refresh"></i> 6 </a> 7 8 <a href="#" data-action="collapse"> 9 <i class="ace-icon fa fa-plus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i> 10 </a> 11 </div> 12 <!--end of toolbar --> 13 <h4 class="header blue bolder smaller">工作经历</h4> 14 15 <!-- #section:custom/widget-box--work1 --> 16 <div class="widget-box" ng-repeat="work in works ">//重点在这里 works循环展示 17 <div class="widget-header"> 18 <h5 class="widget-title">工作经历{{$index + 1}}</h5> 19 <div class="widget-toolbar"> 20 <a ng-click="saveWork(work);" >//单条记录当作形参，保存员工工作经历 21 <i class="ace-icon fa fa-floppy-o bigger-125"></i> 22 </a> 23 <a href="#" data-action="collapse"> 24 <i class="ace-icon fa fa-chevron-up" ></i> 25 </a> 26 </div> 27 </div> 28 <div class="widget-body"> 29 <div class="widget-main"> 30 <!-- start working-plus group --> 31 <div class="form-group" > 32 <div class="col-md-6"> 33 <div class="profile-user-info profile-user-info-striped"> 34 <div class="profile-info-row"> 35 <div class="profile-info-name">开始日期</div> 36 37 <div class="profile-info-value"> 38 <div class="input-medium"> 39 <div class="input-group"> 40 41 <input class="input-medium date-picker" readonly id="" type="text" data-date-format="yyyy-mm-d d" placeholder="" ng-model="work.workbegindate" />//单条记录中属性显示 42 <span class="input-group-addon"> 43 <i class="ace-icon fa fa-calendar"></i> 44 </span> 45 </div> 46 </div> 47 </div> 48 </div> 49 50 <div class="profile-info-row"> 51 <div class="profile-info-name">结束日期</div> 52 53 <div class="profile-info-value"> 54 <div class="input-medium"> 55 <div class="input-group"> 56 <input class="input-medium date-picker" readonly id="" type="text" data-date-format="yyyy-mm-d d" placeholder="" ng-model="work.workenddate" /> 57 <span class="input-group-addon"> 58 <i class="ace-icon fa fa-calendar"></i> 59 </span> 60 </div> 61 </div> 62 </div> 63 </div> 64 65 <div class="profile-info-row"> 66 <div class="profile-info-name">公司名称</div> 67 68 <div class="profile-info-value"> 69 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.company" /> 70 </div> 71 </div> 72 <div class="profile-info-row"> 73 <div class="profile-info-name">职位</div> 74 75 <div class="profile-info-value"> 76 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.job" /> 77 </div> 78 </div> 79 </div> 80 </div> 81 <div class="col-md-6"> 82 <div class="profile-user-info profile-user-info-striped"> 83 <div class="profile-info-row"> 84 <div class="profile-info-name">工作地点</div> 85 86 <div class="profile-info-value"> 87 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.workplace" /> 88 </div> 89 </div> 90 <div class="profile-info-row"> 91 <div class="profile-info-name"> 联系电话</div> 92 93 <div class="profile-info-value"> 94 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.tel" /> 95 </div> 96 </div> 97 <div class="profile-info-row"> 98 <div class="profile-info-name"> 是否离职</div> 99 100 <div class="profile-info-value"> 101 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.isout" /> 102 </div> 103 </div> 104 <div class="profile-info-row"> 105 <div class="profile-info-name">备注 </div> 106 107 <div class="profile-info-value"> 108 <input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.remark" /> 109 </div> 110 </div> 111 </div> 112 </div> 113 </div> 114 <!-- end working-plus group --> 115 </div> 116 </div> 117 </div> 118 <!-- /section:custom/widget-box--work1-->