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-->
AngularJs之ng-repeat的用法的更多相关文章
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- AngularJS的基本概念和用法
mvc 为什么需要mvc(mvc只是手段,终极目标是模块化和复用) 代码规模越来越大,切分职责是大势所趋 为了复用 为了后期维护方便 前端mvc的困难 操作DOM的代码必须等待整个页面全部加载完成. ...
- 夺命雷公狗—angularjs—8—ng-class的简单用法
我们在正常的业务处理中往往会遇到一些逻辑类的问题,比如各行换色,现在angularjs里面也给我们提供了一个小小的的class处理的方式,废话不多说,如下所示: <!doctype html&g ...
- angularjs中ng-repeat-start与ng-repeat-end用法实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- MySQL中 while loop repeat 的用法
-- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和 /* while循环语法: while 条件 DO 循 ...
- table sorting–angularjs
1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0. ...
- [译]用AngularJS构建大型ASP.NET单页应用（三）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single A ...
随机推荐
- apache禁止访问文件或目录执行权限、禁止运行脚本PHP文件的设置方法
<Directory "要去掉PHP执行权限的目录路径,例如:D:/piaoyun.cc/upload"> ErrorDocument 404 /404/404.h ...
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...
- MobClick详解
1.使用自定义事件 使用自定义事件功能请先在网站应用管理后台(设置->编辑自定义事件)中添加相应的自定义事件后,服务器才会对相应的自定义事件请求进行处理.这里我们将提供几个简单而通用的接口: 1 ...
- ubuntu系统无法访问无法磁盘最佳解决办法
出现如下错误: Error mounting /dev/sda8 at /media/fzh/System: Command-line `mount -t "ntfs" -o &q ...
- SWFUpload 2.5.0版 官方说明文档 中文翻译版
原文地址:http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#setFileUploadLimit SWFUpload v2 ...
- PlayMaker 学习笔记
1.v1.7.8.3版本无法使用全局变量,原因是Assets\Plugins\PlayMaker下的Resources文件夹变成中文了,无法创建全局变量文件,手动创建一个Resources文件夹即可
- Java并发包源码学习之AQS框架（三）LockSupport和interrupt
接着上一篇文章今天我们来介绍下LockSupport和Java中线程的中断(interrupt). 其实除了LockSupport,Java之初就有Object对象的wait和notify方法可以实现 ...
- Ubuntu10.04下安装Ns2的一系列错误及解决方案
安装之前改一下nam1.11下的agent.h文件73行 Null改为0 第一个错误: xxx configuration: Syntax error: Unterminated quoted str ...
- C++ 传参数 拉起程序
ShellExecute(NULL,_T("open"),_T("Update.exe"),"Own",NULL,SW_HIDE);
- HDU 5651 计算回文串个数问题(有重复的全排列、乘法逆元、费马小定理)
原题: http://acm.hdu.edu.cn/showproblem.php?pid=5651 很容易看出来的是,如果一个字符串中,多于一个字母出现奇数次,则该字符串无法形成回文串,因为不能删减 ...