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 ...
随机推荐
- Tomcat服务器原理详解
[目录]本文主要讲解Tomcat启动和部署webapp时的原理和过程,以及其使用的配置文件的详解.主要有三大部分: 第一部分.Tomcat的简介和启动过程 第二部分.Tomcat部署webapp 第三 ...
- centos 7.0 ln命令 和chkconfig 命令介绍 开机自动启 服务
有时候centos需要 程序开机启动的时候 自启动 首先在 /etc/init.d/ cd /etc/init.d 文件夹下建立开机启动项 使用ln命令 使用方式 : ln [options] so ...
- servlet的九大内置对象
隐式对象 说明 request 转译后对应HttpServletRequest/ServletRequest对象 response 转译后对应HttpServletRespons/ServletRes ...
- ServletContext
1.为什么需要servletContext 需求1 需求2 --------------->解决之道servletContext servletContext 1.ServletC ...
- C# 正则分组捕获
分组语法 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp) (?:exp ...
- 电脑开机黑屏,显示Reboot and Select proper boot device!
“reboot and select proper boot device or insert boot media in selected boot device and press a key” ...
- gdb调试core文件
本人最近正在学习调试技术,此处对栈溢出做一些总结. gdb的基本使用就不多扯了. 主要针对发行在外的release版本的软件出现问题时的调试. 一般来讲,查看堆栈就是使用bt,这个时候加上bt ful ...
- R语言 奇怪的NA
> 1+NA [1] NA > NA==1 [1] NA > c(NA,1:50) [1] NA 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- 用数组求Fibonacci数列
#include<stdio.h>int main(){ int a[20]={1,1}; int n=2,i; for(n=2;n<20;n++) ...
- BNR Android Demo学习笔记（一）——CrimeIntent
开发环境:win7,Android Studio 1.2, 1.Model Crime,数据模型,每个Crime有一个UUID作为唯一标识. package tina.criminalintent; ...