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 ...
随机推荐
- Java多线程编程核心技术---拾遗增补
线程状态验证 public class MyThread extends Thread { public MyThread() { System.out.println("构造方法中的状态: ...
- SignalR 资料
链接:http://www.cnblogs.com/royding/p/3919134.html
- Win7电脑无法启用无线连接或无线连不上网
1. 上不去网,看是否是无线网卡禁止. 2. 打开控制面板--网络和Internet--查看网络状态和任务--更改网络适配器 3. 4.若启用后无线网络连接仍为灰色,继续往下看 5.点击开始,找到运行 ...
- 新浪微博客户端(47)-在TextView中插入表情
DJEmotionPageView.m // 发送点击广播(和android类似,区别在于android的广播是只要有上下文对象context,就可以发送) // iOS中的通知发送和接收都是通过NS ...
- 推荐 10 个超棒的 CSS3 代码生成工具
新的在线工具和 WebApp 帮助开发者快速地创建网站而不用写代码.前端开发已经在框架和代码库方面有了很大的进展. 但是许多开发者已经忘记了代码生成器在构建网站时的价值.下面的资源是完全免费的 Web ...
- js 的强制 类型 转换cast, 伪对象?
拼音输入法简单快捷, 但是重码多, 所以要看清了再选择, 不然会影响输入正确性和 心情的! js的类型 隐式 转换? 是指, 根据 表达式的操作符号 如if(), + , && , j ...
- R语言画图实例-参考R语言实战
dose <- c(, , , ,) drugA <- c(, , , , ) drugB <- c(, , , , ) # 数据准备 opar <- par(no.reado ...
- Memcached目录
Memcached 简介.安装和基本使用 Memcached基础知识 理解Memcached的分布式 Memcached存储命令 - set Memcached存储命令 - add Memcached ...
- 10条PHP编程习惯助你找工作
过去的几周对我来说是一段相当复杂的经历.我们公司进行了大裁员,我是其中之一,但却体验到了其中的乐 趣.我从来没有被开除过,所以很难不去想得太多.我开始浏览招聘板块,一个全职PHP程序员的职位很吸引人, ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...