1. angular.module('APP', [])
  2.  
  3. .controller('MainController', function($scope, UserConstants){
  4.   var user = {
  5.     firstName: 'Benjamin',
  6.     lastName:  'Roth'
  7.   };
  8.   this.user = user;
  9.   this.userTypes = UserConstants.types;
  10. })
  11. .service('UserPresenter', function(UserConstants){
  12.   var typeFromId = _.memoize(function(typeId){
  13.     var obj = _.findWhere(UserConstants.types, { value: typeId});
  14.     return obj ? obj.display : '';
  15.   });
  16.  
  17.   return {
  18.     fullName: function(user){
  19.       return user.firstName + ' ' + user.lastName;
  20.     },
  21.     type: function(user){
  22.       return typeFromId(user.typeId);
  23.     }
  24.   };
  25. })
  26. .factory('UserModel', function(UserPresenter){
  27.   function UserModel(props){
  28.     _.extend(this, props);
  29.   }
  30.   UserModel.prototype.fullName = function(){
  31.     return UserPresenter.fullName(this);
  32.   };
  33.   UserModel.prototype.type = function(){
  34.     return UserPresenter.type(this);
  35.   };
  36.   return UserModel;
  37. })
  38. .filter('user', function(UserPresenter){
  39.   return function(user, fnName){
  40.     return UserPresenter[fnName](user);
  41.   };
  42. })
  43. .constant('UserConstants', {
  44.   types: [
  45.     { value: '1', display: 'Front end' },
  46.     { value: '2', display: 'Back end' },
  47.     { value: '3', display: 'Full stack' }
  48.   ]
  49. });
  1. <!DOCTYPE html>
  2. <html ng-app="APP">
  3. <head>
  4.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  5.   <script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js">
  6. </script>
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  8.   <meta charset="utf-8">
  9.   <title>JS Bin</title>
  10. </head>
  11. <body>
  12.     <div class="container-fluid" ng-controller="MainController as main">
  13.       <div class="row">
  14.         <div class="col-sm-3">
  15.           <pre>{{ main.user | json}}</pre>
  16.         </div>
  17.         <hr>
  18.         <div class="col-sm-3">
  19.           <form>
  20.             <div class="form-group">
  21.               <label>First Name</label>
  22.               <input ng-model="main.user.firstName" type="text">
  23.             </div>
  24.             <div class="form-group">
  25.               <label>Last Name</label>
  26.               <input ng-model="main.user.lastName" type="text">
  27.             </div>
  28.             <div class="form-group">
  29.               <label>Type</label>
  30.               <select ng-model="main.user.typeId" ng-options="type.value as type.display for type in main.userTypes"></select>
  31.             </div>
  32.           </form>
  33.         </div>
  34.         <hr>
  35.         <div class="col-sm-3">
  36.           <form>
  37.             <div class="form-group">
  38.               <label>Full Name</label>
  39.               {{ main.user | user:'fullName' }}
  40.             </div>
  41.             <div class="form-group">
  42.               <label>Type:</label>
  43.               {{ main.user | user:'type' }}
  44.             </div>
  45.           </form>
  46.         </div>
  47.       </div>
  48.     </div>
  49. </body>
  50. </html>

[AngularJS] Transforming raw JSON data to meaningful output in AngularJS的更多相关文章

  1. 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 ...

  2. 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 ...

  3. 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, ...

  4. AssetsUtils【读取assets、res/raw、./data/data/包名/目录下的文件】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装了以下功能: 1.读取assets目录下的资源html.文件.图片,将文件复制到SD卡目录中: 2.读取res/raw目录下的文 ...

  5. POST Raw JSON提交

    contentType: "application/json", data: JSON.stringify( { org: org, worksite_info: info }), ...

  6. SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data错误的解决

    记录个报错: 问题描述: 经过服务器生成图片返到前台时,在火狐浏览器中下载图片或打开图片时报错:SyntaxError: JSON.parse: unexpected character at lin ...

  7. 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 ...

  8. PHP convet class to json data

    /********************************************************************* * PHP convet class to json da ...

  9. json data 解析demo

    json data: demo: JsonObject jsonObject= JsonHandle.getAsJsonObject(city_dataInfo).get("data&quo ...

随机推荐

  1. .NET2.0下的对象生成JSON数据

    前言:今天研究了下在.NET2.0环境下开发Ajax程序经常用到的一个数据类型JSON, 一.什么是JSON? 自己也写不了句子不是很专业,下面是百度百科的关于JSON的介绍: JSON(JavaSc ...

  2. 在Linux系统中如何把文件拷贝到U盘

    Linux下把所有的都当成文件处理,如果在linux系统下需要拷贝文件,哪么你需要先把U盘挂载到系统中的某一个位置,然后再使用cp命令完成拷贝.   工具/原料 Linux操作系统一台 U盘一枚 方法 ...

  3. [MVC4-基礎] 從資料庫取值顯示在DropDownList中

    剛開始學MVC4,以下是一些基礎的學習筆記! 完成效果像下面這樣,資料來源是既有的Database. 1.Controller public ActionResult Index() { SqlCon ...

  4. ASP.net 前台页面通过ID获取控件

    asp.net的服务器控件的ID通常只能在服务器端很好的识别,客户端需要通过ClientID获得控件 1.通过js获得   var controlID = "<%=controlID. ...

  5. taglib的使用

    使用自定义的taglib可以是我们对页面数据的处理放在后台,不仅使用方便,而且影藏了处理逻辑,也更加的安全. 需要使用到servlet.jar 1.在web-inf下建立taglib.tld文件 &l ...

  6. 网络NSURLSession

    简单下载图片 dispatch_queue_t queue =dispatch_queue_create(NULL, DISPATCH_QUEUE_CONCURRENT); dispatch_asyn ...

  7. progit-zh（Git中文文档）

    发现好像在墙外,还是下载下来看会快点 链接: http://pan.baidu.com/s/1o8EiDMq 密码: vzf9

  8. MySql不支持事务解决

    用的是一个绿色版的mysql数据库,发现不支持事务,在网络上搜集资料找到解决方案: 1.执行语句  SHOW ENGINES; 如果发现InnoDB全部显示为“YES”,说明该版本的数据库支持事务 2 ...

  9. jquery easyui+layer后台框架

    最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载

  10. HTML&CSS基础学习笔记1-简单网页中有哪些标签？

    一个简单网页中有哪些HTML标签? 平时我们看到的网页,都是由HTML的标签来组成的.HTML标签非常多,我们先来认识一部分. 1. <html></html>称为根标签,所有 ...