[AngularJS] Transforming raw JSON data to meaningful output in AngularJS
angular.module('APP', [])
.controller('MainController', function($scope, UserConstants){
var user = {
firstName: 'Benjamin',
lastName: 'Roth'
};
this.user = user;
this.userTypes = UserConstants.types;
})
.service('UserPresenter', function(UserConstants){
var typeFromId = _.memoize(function(typeId){
var obj = _.findWhere(UserConstants.types, { value: typeId});
return obj ? obj.display : '';
});
return {
fullName: function(user){
return user.firstName + ' ' + user.lastName;
},
type: function(user){
return typeFromId(user.typeId);
}
};
})
.factory('UserModel', function(UserPresenter){
function UserModel(props){
_.extend(this, props);
}
UserModel.prototype.fullName = function(){
return UserPresenter.fullName(this);
};
UserModel.prototype.type = function(){
return UserPresenter.type(this);
};
return UserModel;
})
.filter('user', function(UserPresenter){
return function(user, fnName){
return UserPresenter[fnName](user);
};
})
.constant('UserConstants', {
types: [
{ value: '1', display: 'Front end' },
{ value: '2', display: 'Back end' },
{ value: '3', display: 'Full stack' }
]
});
<!DOCTYPE html>
<html ng-app="APP">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid" ng-controller="MainController as main">
<div class="row">
<div class="col-sm-3">
<pre>{{ main.user | json}}</pre>
</div>
<hr>
<div class="col-sm-3">
<form>
<div class="form-group">
<label>First Name</label>
<input ng-model="main.user.firstName" type="text">
</div>
<div class="form-group">
<label>Last Name</label>
<input ng-model="main.user.lastName" type="text">
</div>
<div class="form-group">
<label>Type</label>
<select ng-model="main.user.typeId" ng-options="type.value as type.display for type in main.userTypes"></select>
</div>
</form>
</div>
<hr>
<div class="col-sm-3">
<form>
<div class="form-group">
<label>Full Name</label>
{{ main.user | user:'fullName' }}
</div>
<div class="form-group">
<label>Type:</label>
{{ main.user | user:'type' }}
</div>
</form>
</div>
</div>
</div>
</body>
</html>
[AngularJS] Transforming raw JSON data to meaningful output in AngularJS的更多相关文章
- SQL to JSON Data Modeling with Hackolade
Review: SQL to JSON data modeling First, let’s review, the main way to represent relations in a rela ...
- directly receive json data from javascript in mvc
if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...
- Guzzle Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, malformed JSON
项目更新到正式平台时,出现Guzzle(5.3) client get请求出现:Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, ...
- AssetsUtils【读取assets、res/raw、./data/data/包名/目录下的文件】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装了以下功能: 1.读取assets目录下的资源html.文件.图片,将文件复制到SD卡目录中: 2.读取res/raw目录下的文 ...
- POST Raw JSON提交
contentType: "application/json", data: JSON.stringify( { org: org, worksite_info: info }), ...
- SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data错误的解决
记录个报错: 问题描述: 经过服务器生成图片返到前台时,在火狐浏览器中下载图片或打开图片时报错:SyntaxError: JSON.parse: unexpected character at lin ...
- SyntaxError: JSON.parse: bad control character in string literal at line 1 column 16 of the JSON data
JSON.parse转化Json字符串时出现:SyntaxError: JSON.parse: bad control character in string literal at line 1 co ...
- PHP convet class to json data
/********************************************************************* * PHP convet class to json da ...
- json data 解析demo
json data: demo: JsonObject jsonObject= JsonHandle.getAsJsonObject(city_dataInfo).get("data&quo ...
随机推荐
- J2EE (十) 简洁的JSTL、EL
简介 JSTL(JSP Standard Tag Library ,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 由四个定制标记库(core.format.xml 和 sql)和一对通 ...
- 结合tcpdump命令对traceroute深入分析
昨天突然被问到traceroute的原理,一时竟也说不出来,有些命令平时虽然经常在用,但实际原理确并不了解,趁这次机会就来梳理一下. traceroute:是网络诊断中,用来分析IP包经过那些路由的命 ...
- （转） CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Ajax”(是否缺少程序集引用?)
从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图, 后来重新引用了本机的system.web.mv ...
- 如何在sqlserver建立新用户并关联相应的数据库
我们经常需要在数据库上建立有权限的用户,该用户只能去操作某个特定的数据库(比如该用户只能去读,去写等等),那么我们应该怎么在sqlserver上设置呢?下面的步骤有点长,只要一步一步跟着设置就行 方法 ...
- NHibernate之映射文件配置说明（转载3）
十二.组件(component), 动态组件(dynamic-component) <component>元素把子对象的一些元素与父类对应的表的一些字段映射起来. 然后组件可以定义它们自己 ...
- SqlServer 开启或关闭数据库主键自增
可用作删除一行主键数据库,在还原数据行,或者删掉后,被伤处的主键还可以利用 --开启当前表的可复制功能,仅在当前回话中有效 SET IDENTITY_INSERT dbo.PDAUserInfo O ...
- ORACLE创建OEM是老爱报的错误【weber出品】
还是采用静默安装,手工建库完成后.在安装的OEM的时候一直报这个错误.这里稍微记载以下解决方案: Database connection through listener failed. Fix th ...
- 面向对象重写（override）与重载（overload）区别---转载“竹木人”
一.重写(override) override是重写(覆盖)了一个方法,以实现不同的功能.一般是用于子类在继承父类时,重写(重新实现)父类中的方法. 重写(覆盖)的规则: 1.重写方法的参数列表必须完 ...
- 近期Responsive web design项目经验分享
关于meta <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user ...
- php 之 注册审核(0523)
当注册后,先将信息保存到session,通过审核后才会添加到数据库中, 审核通过后状态变为已通过,这时添加到数据库中的信息进行登录.若发现此用户的不良行为,可以撤销通过. 注册页面: <!DOC ...