[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 ...
随机推荐
- iOS 蓝牙4.0开发
背景: 1.iOS的蓝牙不能用来传输文件.2.iOS与iOS设备之间进行数据通信,使用gameKit.framework3.iOS与其他非iOS设备进行数据通信,使用coreBluetooth.fra ...
- Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一． 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...
- Linux操作系统分析__破解操作系统的奥秘
学号:SA12226343 姓名:sunhongbo 一.操作系统工作的基础 存储程序计算机和堆栈(函数调用堆栈)机制以及中断机制是操作系统工作的基础. 现代计算机仍采用存储程序计算机的结构体系和工 ...
- c - 对数组进行排序(通过指针的指针)
通过指针的指针,以及一个指针数组,对实际数组元素进行排序,有一个优点,就是排序过程交换的只有指针数组中的值,而不是实际的数组的元素.当实际元素中的对象很大,特别是结构体等类型时,这样做是很有好处. 下 ...
- Objective-C基础之──多态
Objective-C语言是面向对象的高级编程语言,因此,它具有面向对象编程所具有的一些特性,即:封装性.继承性和多态性. 今天介绍一下Objective-C中的多态性. 一.什么是多态 多态:不同对 ...
- NOIP201504推销员
#include<iostream> #include<cstring> #include<algorithm> #include<cmath> #in ...
- 表单验证提交——submit与button
之前做东西接触过表单验证提交,但是都是为了完成工作,做完就做完了,没有注过表单验证提交有几种方法,各方法都有啥区别.今天瞎折腾了一下,对他们研究了一下,如下是我个人的理解: submit: 从字面上看 ...
- linux 常用压缩工具快速指南
.tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...
- 数据挖掘-Python基本模块
1.numpy:基础模块,高效处理数据.提供数组支持 2.pandas:数据探索和数据分析 3.matplotlib:数据成图模块,解决数据可视化 4.scipy:支持数值计算,支持矩阵运算,提供高等 ...
- QT中共享库的生成与使用
一. 静态库的生成1. 测试目录: lib2. 源码文件名: mywindow.h, mywindow.cpp, 类MyWindow继承于QPushButton, 并将文字设置为"I'm i ...