AngularJs之ng-repeat的用法

可参考文章: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 //查看员工背景资料
$http({
method : 'POST',
url : '/omss/viewEmpBackgroudById?id='+id
}).success(function(data, status, headers, config) {
$scope.status = status;
if (data.length != 0) {
$scope.employeeBg = (data[0]);
console.log("员工背景data:"+JSON.stringify(data))
//获取页面中下拉框的数据源
/*$scope.types =[
{name:'正式员工',id:'1', xorder:'1'},
{name:'劳务工', id:'22',xorder:'2'},
{name:'实习生', id:'23',xorder:'3'}
];*/
//性别
$scope.genders =[
{TITLE:'男',ID:'1', xorder:'1'},
{TITLE:'女', ID:'2',xorder:'2'}
];
$scope.selectedbggender=(data[0]).bggender;
//循环多个工作经历
$scope.works=(data[0]).workList; //读取数据源
$scope.edus=(data[0]).eduList;
$scope.familys=(data[0]).familyList;
}
}).error(function(data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
$scope.tips = '对不起,您的网络情况不太稳定。';
});
 代码二
1 /* 保存员工工作经历
*/
$scope.saveWork = function(work) {
console.log("进入saveWork.........");
var postJson = {
'id':work.id,//传递过来的work本来就带有的属性,只是页面未展示
'sid':work.sid,//传递过来的work本来就带有,只是页面未展示
'workbegindate':work.workbegindate,
'workenddate':work.workenddate,
'company':work.company,
'job':work.job,
'workplace':work.workplace,
'tel':work.tel,
'isout':work.isout,
'remark':work.remark,
};
$http({
method : 'POST',
url : '/omss/saveWork',
data : JSON.stringify(postJson)
}).success(function(data, status, headers, config) {
$scope.status = status;
console.log(data);
alert("保存成功");
}).error(function(data, status, headers, config) {
$scope.data = data || "Request failed";
$scope.status = status;
$scope.tips = '对不起,您的网络情况不太稳定。';
}); };
 代码三
1                <div class="space"></div>
<!-- toolbar -->
<div class="widget-toolbar">
<a ng-click="reloadEmp();">
<i class="ace-icon fa fa-refresh"></i>
</a> <a href="#" data-action="collapse">
<i class="ace-icon fa fa-plus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i>
</a>
</div>
<!--end of toolbar -->
<h4 class="header blue bolder smaller">工作经历</h4> <!-- #section:custom/widget-box--work1 -->
<div class="widget-box" ng-repeat="work in works ">//重点在这里 works循环展示
<div class="widget-header">
<h5 class="widget-title">工作经历{{$index + 1}}</h5>
<div class="widget-toolbar">
<a ng-click="saveWork(work);" >//单条记录当作形参,保存员工工作经历
<i class="ace-icon fa fa-floppy-o bigger-125"></i>
</a>
<a href="#" data-action="collapse">
<i class="ace-icon fa fa-chevron-up" ></i>
</a>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<!-- start working-plus group -->
<div class="form-group" >
<div class="col-md-6">
<div class="profile-user-info profile-user-info-striped">
<div class="profile-info-row">
<div class="profile-info-name">开始日期</div> <div class="profile-info-value">
<div class="input-medium">
<div class="input-group"> <input class="input-medium date-picker" readonly id="" type="text" data-date-format="yyyy-mm-d                                            d" placeholder="" ng-model="work.workbegindate" />//单条记录中属性显示
<span class="input-group-addon">
<i class="ace-icon fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div> <div class="profile-info-row">
<div class="profile-info-name">结束日期</div> <div class="profile-info-value">
<div class="input-medium">
<div class="input-group">
<input class="input-medium date-picker" readonly id="" type="text" data-date-format="yyyy-mm-d                                          d" placeholder="" ng-model="work.workenddate" />
<span class="input-group-addon">
<i class="ace-icon fa fa-calendar"></i>
</span>
</div>
</div>
</div>
</div> <div class="profile-info-row">
<div class="profile-info-name">公司名称</div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.company" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name">职位</div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.job" />
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="profile-user-info profile-user-info-striped">
<div class="profile-info-row">
<div class="profile-info-name">工作地点</div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.workplace" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name"> 联系电话</div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.tel" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name"> 是否离职</div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.isout" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name">备注 </div> <div class="profile-info-value">
<input class="col-xs-12 col-sm-10" type="text" id="" name="" placeholder="" ng-model="work.remark" />
</div>
</div>
</div>
</div>
</div>
<!-- end working-plus group -->
</div>
</div>
</div>
<!-- /section:custom/widget-box--work1-->

上一篇:MySQL 索引


下一篇:GUID相关知识