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 ...
随机推荐
- 网页JQ基础之jq-隐藏以及显示特效
简单的 隐藏以及显示的 JQ 的代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/j ...
- MessageFormat用法
MessageFormat用来格式化一个消息,通常是一个字符串,比如: String str = "I'm not a {0}, age is {1,number,short}", ...
- [设计模式] Javascript 之 观察者模式
观察者模式:定议 定义对象间的一种一对多的关系,当一个对象状态改变时 (一般称为被观察者),依赖于该对象的对象被通知,并更新; 观察者模式:说明 1. 观察者模式是行为模式,也被称为:发布-订阅模式. ...
- ELK日志分析系统搭建（转）
摘要: 前段时间研究的Log4j+Kafka中,有人建议把Kafka收集到的日志存放于ES(ElasticSearch,一款基于Apache Lucene的开源分布式搜索引擎)中便于查找和分析,在研究 ...
- poj3070 Fibonacci
Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. F ...
- eclipse如何导入java项目文件
平时下载到项目时,希望能够导入到eclipse中使用.但有些项目不能直接导入,需要做转换. 打开源文件目录,查询如下: 如果目录中包含pom.xml文件,则说明该项目由Maven构建的,参考以下 如何 ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- sublime linux下无法输入中文
cd ~ vim sublime_imfix.c 输入 #include <gtk/gtkimcontext.h> void gtk_im_context_set_client_windo ...
- java项目导入IntelliJ IDEA
(0)之所以有第0步,是因为第一次倒入失败,所以从删除上次倒入的数据开始- 开始删除数据. 启动Intelli J,点击右键删除上次的导入的项目 把配置拷贝到.m2文件夹下,并且删除上次下载的一些依赖 ...
- 当webshell不可执行cmshell时 （菜刀的安全模式!）可用此脚本突破执行cmd命令
<?php /* ============== */ error_reporting(0); ini_set('max_execution_time',0); // -------------- ...