[AngularJS] Transforming raw JSON data to meaningful output in AngularJS
2016-03-16 15:10
691 查看
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>
相关文章推荐
- Implementing Angular2 forms – Beyond basics
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- Angular.watch性能问题和ngInfiniteScroll
- AngularJS基本功能
- Angular Chart 使用说明(基于angular工程)
- AngularJS展示数据的ng-bind指令和{{}} 区别
- AngularJS入门(二)
- Angular之$resource
- Angular自定义指令(进阶)
- AngularJS学习(一)——基本的入门程序(配置环境)
- [angularjs] angularjs系列笔记(一)简介
- AngularJS实现鼠标右键事件
- 从 AngularJS 模块定义说起
- AngularJS介绍 - 下一个大框架
- angularjs---思维导图 01
- 细说Angular ng-class
- AngularJS入门(一)
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
- 安装Yeoman + Bower + Grunt 创建angularjs 项目结构(新手笔记一)
- AngularJS UI 扩展 AngularUI