大字颜色
3 | 4 |来点动画试试
双向绑定内容（纯代码）
10 | 13 | 14 | 15 |预览
16 | 17 | 18 |说明
19 | 这是基于百度的ueditor库封装出来的HTML编辑器，ueditor官方网站在：http://ueditor.baidu.com/ -------------------------------------------------------------------------------- /app/scripts/controllers/select/multiple.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.select.multiple', function ($scope) { 4 | var vm = $scope.vm = {}; 5 | vm.cities = [ 6 | { 7 | province: '北京', 8 | code: 'bj', 9 | label: '北京市' 10 | }, 11 | { 12 | province: '上海', 13 | code: 'sh', 14 | label: '上海市' 15 | }, 16 | { 17 | province: '广东', 18 | code: 'gz', 19 | label: '广州' 20 | }, 21 | { 22 | province: '广东', 23 | code: 'sz', 24 | label: '深圳' 25 | } 26 | ]; 27 | vm.selection = function() { 28 | return _.where(vm.cities, {checked: true}); 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/jsp/getContent.jsp: -------------------------------------------------------------------------------- 1 | <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> 2 | 3 | 4 | 9 | <% 10 | request.setCharacterEncoding("utf-8"); 11 | response.setCharacterEncoding("utf-8"); 12 | String content = request.getParameter("myEditor"); 13 | 14 | 15 | 16 | response.getWriter().print("第1个编辑器的值"); 17 | response.getWriter().print(""+content+"
");
18 |
19 | %>
--------------------------------------------------------------------------------
/app/scripts/controllers/select/basic.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.select.basic', function ($scope) {
4 | var vm = $scope.vm = {};
5 | vm.cities = [
6 | {
7 | province: '北京',
8 | code: 'bj',
9 | label: '北京市'
10 | },
11 | {
12 | province: '上海',
13 | code: 'sh',
14 | label: '上海市'
15 | },
16 | {
17 | province: '广东',
18 | code: 'gz',
19 | label: '广州'
20 | },
21 | {
22 | province: '广东',
23 | code: 'sz',
24 | label: '深圳'
25 | }
26 | ];
27 | vm.value = vm.cities[1];
28 | vm.codeValue = 'gz';
29 | vm.groupedValue = 'sz';
30 | vm.trackValue = {code: 'gz', label: '羊城'};
31 | });
32 |
--------------------------------------------------------------------------------
/app/scripts/directives/common/recursive.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * 可被递归的内容，这是一个进一步简化sf-treerepeat的尝试
5 | */
6 | angular.module('scHelper').directive('scRecursion', function() {
7 | return {
8 | restrict: 'EA',
9 | scope: {
10 | value: '='
11 | },
12 | controller: function($scope) {
13 |
14 | },
15 | compile: function($element) {
16 |
17 | }
18 | }
19 | });
20 |
21 | /**
22 | * 递归展开指令，就地展开父级
23 | */
24 | angular.module('scHelper').directive('scRecursive', function() {
25 | return {
26 | restrict: 'EA',
27 | require: '^scRecursion',
28 | scope: {
29 | value: '='
30 | },
31 | link: function($scope, $element, attrs, recursion) {
32 |
33 | }
34 | }
35 | });
--------------------------------------------------------------------------------
/app/views/animation/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | -
4 |
- 5 | {{item}} 6 | 7 | 8 |
说明
13 |-
14 |
- 15 | 采用了Angular官方的动画模块，本例中仅演示了最基础的两个动画，具体信息以及参数请参考 16 | 官方文档 17 | 。 18 | 19 |
- 20 | 通过ng-repeat中的ng-enter和ng-leave动画钩子来触发基本的CSS Transition动画,还可使用CSS Keyframe或Javascript来实现动画。 21 | 22 |
7 |
9 | {{file.name}}
10 |
11 |
12 |
13 |
17 |
--------------------------------------------------------------------------------
/test/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": true,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "trailing": true,
20 | "smarttabs": true,
21 | "globals": {
22 | "after": false,
23 | "afterEach": false,
24 | "angular": false,
25 | "before": false,
26 | "beforeEach": false,
27 | "browser": false,
28 | "describe": false,
29 | "expect": false,
30 | "inject": false,
31 | "it": false,
32 | "jasmine": false,
33 | "spyOn": false
34 | }
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/app/scripts/controllers/select/typeAhead.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.select.typeAhead', function ($scope) {
4 | var vm = $scope.vm = {};
5 | vm.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
6 | });
7 |
--------------------------------------------------------------------------------
/app/views/show/panel.html:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
2 |
20 | 重新显示
21 |
22 |
--------------------------------------------------------------------------------
/app/views/input/radio.html:
--------------------------------------------------------------------------------
1 |
3 |
14 | 4 | 5 | 点右侧的图标折叠/展开 6 | 7 | 9 | 10 | 11 | 12 |
13 |
15 |
19 |
16 | 可折叠内容
17 |
18 | 按钮组风格
2 |
3 |
7 |
8 |
9 |
10 | 单选框风格
11 |
12 |
16 |
17 |
18 |
19 | 您选中的是：{{vm.selection}}
20 |
21 |
22 | 说明
23 | 这里使用了一个小技巧：给单选框外面的label加上btn btn-primary风格，并且隐藏掉单选框本身，从而让单选组变成了按钮组的外观，而ng-model等机制不变。 -------------------------------------------------------------------------------- /app/views/show/tab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
8 |
17 |
18 |
19 |
9 |
16 |
10 | 标签1的内容
11 |
12 |
13 | 标签2的内容
14 |
15 | 说明
20 | 这里演示的是直接通过bootstrap实现的方法。 21 |还可以通过angular-bootstrap的tabset指令实现，参见 官方Demo 23 | -------------------------------------------------------------------------------- /app/scripts/controllers/stat/easypiechart.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.stat.easypiechart', function ($scope) { 4 | var vm = $scope.vm = {}; 5 | 6 | vm.percent = 65; 7 | 8 | //常规配置 9 | vm.options = [{ 10 | animate:{ 11 | duration:0, 12 | enabled:false 13 | }, 14 | trackColor:'#888',//线条背景色 15 | barColor:'#2C3E50',//线条颜色 16 | scaleColor:false, 17 | lineWidth:20,//线条大小 18 | lineCap:'circle'//线条形状 19 | }, 20 | {barColor:'#FF530D', lineWidth:10 ,trackColor:'#888', lineCap:'round' ,scaleColor:false}, 21 | {barColor:'#1F8A70', lineWidth:10, trackColor:'#888',lineCap:'round' ,scaleColor:false} 22 | 23 | ]; 24 | 25 | //随机执行 26 | vm.randomMath = function(){ 27 | vm.percent = parseInt(Math.random()*100); 28 | } 29 | }); -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/attachment/fileTypeMaps.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by JetBrains PhpStorm. 3 | * User: taoqili 4 | * Date: 12-2-10 5 | * Time: 下午3:50 6 | * To change this template use File | Settings | File Templates. 7 | */ 8 | //文件类型图标索引 9 | var fileTypeMaps = { 10 | ".rar":"icon_rar.gif", 11 | ".zip":"icon_rar.gif", 12 | ".doc":"icon_doc.gif", 13 | ".docx":"icon_doc.gif", 14 | ".pdf":"icon_pdf.gif", 15 | ".mp3":"icon_mp3.gif", 16 | ".xls":"icon_xls.gif", 17 | ".chm":"icon_chm.gif", 18 | ".ppt":"icon_ppt.gif", 19 | ".pptx":"icon_ppt.gif", 20 | ".avi":"icon_mv.gif", 21 | ".rmvb":"icon_mv.gif", 22 | ".wmv":"icon_mv.gif", 23 | ".flv":"icon_mv.gif", 24 | ".swf":"icon_mv.gif", 25 | ".rm":"icon_mv.gif", 26 | ".exe":"icon_exe.gif", 27 | ".psd":"icon_psd.gif", 28 | ".txt":"icon_txt.gif" 29 | }; -------------------------------------------------------------------------------- /app/scripts/controllers/form/basic.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp') 4 | .controller('ctrl.form.basic', function ($scope) { 5 | var vm = $scope.vm = { 6 | show_error: false, 7 | show_type: 1, 8 | user: {} 9 | }; 10 | 11 | vm.submit = function (basic_form) { 12 | vm.show_error = true; 13 | basic_form.$setDirty(); 14 | if(basic_form.$valid){ 15 | alert("提交成功！"); 16 | } 17 | }; 18 | 19 | vm.change_show_type = function (form) { 20 | if (vm.show_type == 2) { 21 | vm.show_error = true; 22 | } else { 23 | vm.show_error = false; 24 | } 25 | 26 | // 重置表单 27 | vm.user = {}; 28 | form.$setPristine(); 29 | 30 | } 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /app/scripts/controllers/show/alert.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.show.alert', function ($scope) { 4 | var vm = $scope.vm = {}; 5 | //警告类型 6 | vm.types = [ 7 | 'alert-success', 8 | 'alert-info', 9 | 'alert-warning', 10 | 'alert-danger' 11 | ]; 12 | 13 | vm.alerts = [ 14 | {type:'alert-success',msg:'操作成功,请继续下一步!'}, 15 | {type:'alert-danger',msg:'提交失败,修改内容并尝试重新提交!'}, 16 | ]; 17 | //删除单条警告 18 | vm.closeAlert = function (index) { 19 | vm.alerts.splice(index, 1); 20 | }; 21 | //添加新警告 22 | vm.addAlert = function (type, msg) { 23 | if (type === undefined || msg === undefined) { 24 | vm.alerts.push({ 25 | type:'alert-warning', 26 | msg:'类型和内容不能为空.' 27 | }); 28 | } else { 29 | vm.alerts.push({ 30 | type:type, 31 | msg:msg 32 | }); 33 | } 34 | }; 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /app/scripts/controllers/select/custom.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.select.custom', function ($scope) { 4 | var vm = $scope.vm = {}; 5 | vm.provinces = [ 6 | { 7 | label: '北京', 8 | cities: [ 9 | { 10 | population: 1961.24, 11 | code: 'bj', 12 | label: '北京市' 13 | } 14 | ] 15 | }, 16 | { 17 | label: '上海', 18 | cities: [ 19 | { 20 | population: 2301.91, 21 | code: 'sh', 22 | label: '上海市' 23 | } 24 | ] 25 | }, 26 | { 27 | label: '广东', 28 | cities: [ 29 | { 30 | population: 1270.08, 31 | code: 'gz', 32 | label: '广州' 33 | }, 34 | { 35 | population: 1035.79, 36 | code: 'sz', 37 | label: '深圳' 38 | } 39 | ] 40 | } 41 | ]; 42 | }); 43 | -------------------------------------------------------------------------------- /app/views/show/alert.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {{alert.msg}}
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 说明
19 |-
20 |
- 使用bootstrap的内置样式和指令完成的警告框控件 21 |
- 22 | 还可采用来自angular-bootstrap封装的指令，请参考 23 | 官方Demo 24 | 。 25 | 26 |
| 作者： | 4 |5 | 6 | {{author.name}} 7 | 9 | 10 | 11 | （暂无） 12 | Github参与 13 | 或 加QQ群：200242234 14 | 15 | | 16 |
|---|---|
| 进度： | 19 |
20 |
21 |
24 |
25 | |
26 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/app/views/select/select2.html:
--------------------------------------------------------------------------------
1 |
2 |
12 | 单选下拉
3 |
4 |
9 |
10 | {{vm.value1}}
11 | 13 |
14 |
20 |
21 |
22 | 多选输入
15 |
16 |
17 |
18 | {{vm.value2}}
19 | 说明
23 | 这是一个第三方指令（module: ui.select2），它封装了jquery的select2插件。官方网站请点此查看。 26 | -------------------------------------------------------------------------------- /app/views/select/cascade.html: -------------------------------------------------------------------------------- 1 |
2 |
19 |
3 |
6 |
7 |
8 |
12 |
13 |
14 |
17 |
18 | 您选择的是：{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}
20 |
21 | 这里使用ng-if指令来达到下一级有数据才显示下一级的效果
22 |
23 |
24 |
--------------------------------------------------------------------------------
/app/views/stat/easypiechart.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 | 目前百分比为：{{vm.percent}}% 随机测试
18 | 说明
19 |
20 | 注意事项:使用前必须引入 easypiechart,官方暂时没有支持bower的插件安装支持 可以先用我的tag:"angular.easy-pie-chart": "2.1.5-angular"
21 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-showcase",
3 | "version": "0.0.0",
4 | "dependencies": {
5 | "angular": "1.2.15",
6 | "json3": "~3.2.6",
7 | "es5-shim": "~2.1.0",
8 | "jquery": "~1.11.0",
9 | "bootstrap": "~3.0.3",
10 | "angular-resource": "1.2.15",
11 | "angular-cookies": "1.2.15",
12 | "angular-animate": "1.2.15",
13 | "angular-sanitize": "1.2.15",
14 | "angular-ui-router": "~0.2.10",
15 | "underscore": "~1.6.0",
16 | "angular-bootstrap": "~0.11.0",
17 | "moment": "~2.6.0",
18 | "angular-highlightjs": "~0.2.7",
19 | "angular.easy-pie-chart": "2.1.5-angular",
20 | "angular-file-upload": "~0.5.6",
21 | "angular-ui-select2": "~0.0.5",
22 | "angular-tree-repeat": "~0.0.1",
23 | "d3": "~3.4.8",
24 | "angularjs-nvd3-directives": "~0.0.7",
25 | "highcharts-release": "~3.0.7",
26 | "animate.css":"~3.3.0"
27 | },
28 | "devDependencies": {
29 | "angular-mocks": "1.2.15",
30 | "angular-scenario": "1.2.15"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/table/edittip.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
22 | angular.module('app', ['easypiechart'])
23 |
24 |
20 |
27 |
32 |
33 |
--------------------------------------------------------------------------------
/app/scripts/controllers/table/basic.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.table.basic', function ($scope) {
4 | var vm = $scope.vm = {};
5 | vm.items = [];
6 | vm.checkAll = function(checked) {
7 | angular.forEach(vm.items, function(item) {
8 | item.$checked = checked;
9 | });
10 | };
11 | vm.selection = function() {
12 | return _.where(vm.items, {$checked: true});
13 | };
14 | // 供页面中使用的函数
15 | vm.age = function(birthday) {
16 | return moment().diff(birthday, 'years');
17 | };
18 | // 生成演示数据
19 | var MAX_NUM = 10;
20 | function rand(min, max) {
21 | return min + Math.round(Math.random() * (max-min));
22 | }
23 | for (var i = 0; i < MAX_NUM; ++i) {
24 | var id = rand(0, MAX_NUM);
25 | vm.items.push({
26 | id: i + 1,
27 | name: 'Name' + id, // 字符串类型
28 | followers: rand(0, 100 * 1000 * 1000), // 数字类型
29 | birthday: moment().subtract('day', rand(365, 365 * 50)).toDate(), // 日期类型
30 | income: rand(1000, 100000) // 金额类型
31 | });
32 | }
33 | });
34 |
--------------------------------------------------------------------------------
/app/scripts/config/authors.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // 作者列表
4 | angular.module('ngShowcaseApp').constant('authors', [
5 | {
6 | name: 'ngShowcase',
7 | github: 'https://github.com/angular-cn/ng-showcase'
8 | },
9 | {
10 | name: '雪狼',
11 | email: 'asnowwolf@gmail.com',
12 | github: 'https://github.com/asnowwolf'
13 | },
14 | {
15 | name: 'zxsoft',
16 | qq: '21557523',
17 | email: 'zxsoft@gmail.com',
18 | github: 'https://github.com/zxsoft'
19 | },
20 | {
21 | name: 'Ken',
22 | github: 'https://github.com/ckken'
23 | },
24 | {
25 | name: 'playing',
26 | email: 'bestplayingcn@gmail.com',
27 | github: 'https://github.com/playing'
28 | },
29 | {
30 | name: 'why520crazy',
31 | email: 'why520crazy@163.com',
32 | github: 'https://github.com/why520crazy'
33 | },
34 | {
35 | name:'Leonardo',
36 | email:'wang861622836@163.com',
37 | github:'https://github.com/wleonardo'
38 | }
39 | ]);
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/template/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
23 |
24 |
25 |
26 |
11 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/app/scripts/controllers/tree/uiTree.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.tree.uiTree', function ($scope) {
4 | var vm = $scope.vm = {};
5 | $scope.treeData = {
6 | name: "Root",
7 | children: [
8 | {
9 | id: 1,
10 | name: "First Child",
11 | children: [
12 | {
13 | id: 11,
14 | name: "First Grandchild"
15 | },
16 | {
17 | id: 12,
18 | name: "Second Grandchild"
19 | }
20 | ]
21 | },
22 | {
23 | id: 2,
24 | name: "Second Child"
25 | }
26 | ]
27 | };
28 | $scope.drop = function (targetNode, sourceNode, sourceParentNode) {
29 | var children = sourceParentNode.children;
30 | for (var i = 0; i < children.length; i++) {
31 | if (children[i] == sourceNode) {
32 | children.splice(i, 1);
33 | if (!targetNode.children) {
34 | targetNode.children = [];
35 | }
36 | targetNode.children.push(sourceNode);
37 | break;
38 | }
39 | }
40 | };
41 | });
42 |
--------------------------------------------------------------------------------
/app/scripts/directives/common/resize.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * 取所属元素的大小
5 | */
6 | angular.module('scHelper').directive('scResize', function($parse, $interval) {
7 | return {
8 | restrict: 'A',
9 | compile: function($element, attr) {
10 | var fn = $parse(attr['scResize']);
11 | return function(scope, element, attr) {
12 | var lastWidth = -1;
13 | var lastHeight = -1;
14 | // 定时检测宽高，如果变化了，就触发回调。这里不用$interval，是因为不想在检测时触发$apply，而应该在有变化时才触发
15 | // 不用担心定时监测算法的效率问题，取宽高的函数运行很快，在chrome中测试的结果是1毫秒内可以执行10次
16 | var id = setInterval(function() {
17 | var width = element.width();
18 | var height = element.height();
19 | if (width !== lastWidth || height !== lastHeight) {
20 | lastWidth = width;
21 | lastHeight = height;
22 | scope.$apply(function() {
23 | fn(scope, {width: width, height: height})
24 | });
25 | }
26 | }, 300);
27 | scope.$on('destroy', function() {
28 | clearInterval(id);
29 | });
30 | };
31 | }
32 | }
33 | });
34 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/music/music.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 |
17 |
21 |
22 |
13 |
14 |
15 |
16 |
11 |
21 |
22 |
31 |
32 |
--------------------------------------------------------------------------------
/app/scripts/controllers/input/calendar.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.input.calendar', function ($scope) {
4 | var vm = $scope.vm = {};
5 |
6 | //初始化日期
7 | vm.today = function() {
8 | vm.calendar = new Date();
9 | };
10 | vm.today();
11 |
12 | //清除当前日期
13 | vm.clear = function() {
14 | vm.calendar = null;
15 | };
16 |
17 |
18 | // 不允许选择周末
19 | vm.disabled = function(date, mode) {
20 | return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
21 | };
22 |
23 | //最小日期开关
24 | vm.toggleMin = function() {
25 | vm.minDate = vm.minDate ? null : new Date();
26 | };
27 | vm.toggleMin();
28 |
29 | //弹出式日历触发函数
30 | vm.open = function($event) {
31 | $event.preventDefault();
32 | $event.stopPropagation();
33 |
34 | vm.opened = true;
35 | };
36 |
37 | //自定义选项
38 | vm.dateOptions = {
39 | formatYear: 'yy',
40 | startingDay: 1,
41 | formatDayTitle: 'yyyy MMMM'
42 | };
43 |
44 | //输出格式控制,来源:官方date filter
45 | vm.formats = ['yyyy-MMMM-dd', 'yyyy/MM/dd', 'yyyy.MM.dd', 'shortDate'];
46 | vm.format = vm.formats[1];
47 | });
--------------------------------------------------------------------------------
/app/scripts/services/Zoom.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('scHelper').factory('Zoom', function(Rect) {
4 | function Zoom() {
5 | var active = this.active = new Rect();
6 | var activeView = this.activeView = new Rect();
7 | var passive = this.passive = new Rect();
8 | var passiveView = this.passiveView = new Rect();
9 | // 根据三者的相对尺寸，把active中的坐标映射到passive中的坐标
10 | var update = this.update = function() {
11 | var ratioX = passive.width / active.width;
12 | var ratioY = passive.height / active.height;
13 | passive.moveTo(-activeView.x * ratioX, -activeView.y * ratioY);
14 | };
15 | this.resize = function() {
16 | activeView.limitTo({left: 0, top: 0, right: active.width, bottom: active.height});
17 | var ratioX = passive.width / active.width;
18 | var ratioY = passive.height / active.height;
19 | activeView.resize(passiveView.width / ratioX, passiveView.height / ratioY);
20 | update();
21 | };
22 | passiveView.onResize = active.onResize = passive.onResize = this.resize;
23 | activeView.onResize = activeView.onMove = this.update;
24 | }
25 | return Zoom;
26 | });
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/template/template.css:
--------------------------------------------------------------------------------
1 | .wrap{ padding: 5px;font-size: 14px;}
2 | .left{width:425px;float: left;}
3 | .right{width:160px;border: 1px solid #ccc;float: right;padding: 5px;margin-right: 5px;}
4 | .right .pre{height: 332px;overflow-y: auto;}
5 | .right .preitem{border: white 1px solid;margin: 5px 0;padding: 2px 0;}
6 | .right .preitem:hover{background-color: lemonChiffon;cursor: pointer;border: #ccc 1px solid;}
7 | .right .preitem img{display: block;margin: 0 auto;width:100px;}
8 | .clear{clear: both;}
9 | .top{height:26px;line-height: 26px;padding: 5px;}
10 | .bottom{height:320px;width:100%;margin: 0 auto;}
11 | .transparent{ background: url("images/bg.gif") repeat;}
12 | .bottom table tr td{border:1px dashed #ccc;}
13 | #colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;}
14 | .border_style1{padding:2px;border: 1px solid #ccc;border-radius: 5px;box-shadow:2px 2px 5px #d3d6da;}
15 | p{margin: 5px 0}
16 | table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}
17 | li{clear:both}
18 | ol{padding-left:40px; }
--------------------------------------------------------------------------------
/app/scripts/directives/thirdparty/baiduueditor.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by xuanzhang on 14-5-12.
3 | */
4 | angular.module('scHelper').directive('ueditor', function () {
5 | return {
6 | restrict: 'AE',
7 | transclude: true,
8 | replace: true,
9 | template: '',
10 | require: '?ngModel',
11 | scope: {
12 | config: '='
13 | },
14 | link: function (scope, element, attrs, ngModel) {
15 | var editor = new UE.ui.Editor(scope.config || {});
16 | editor.render(element[0]);
17 |
18 | if (ngModel) {
19 | //Model数据更新时，更新百度UEditor
20 | ngModel.$render = function () {
21 | try {
22 | editor.setContent(ngModel.$viewValue);
23 | } catch (e) {
24 |
25 | }
26 | };
27 |
28 | //百度UEditor数据更新时，更新Model
29 | editor.addListener('contentChange', function () {
30 | setTimeout(function () {
31 | scope.$apply(function () {
32 | ngModel.$setViewValue(editor.getContent());
33 | })
34 | }, 0);
35 | })
36 | }
37 | }
38 | }
39 | });
--------------------------------------------------------------------------------
/app/views/show/progress.html:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
16 |
17 |
19 |
20 |
18 |
2 |
6 |
7 |
8 |
3 |
5 | {{vm.value}}%
4 | 选项
9 | 10 | 11 | 12 | 13 | 14 |15 | 16 | 17 |
18 | 26 | -------------------------------------------------------------------------------- /app/views/home/about.html: -------------------------------------------------------------------------------- 1 | 这个项目由多人合作开发，大致分工如下： 2 |
| 职责 | 11 |人员 | 12 |备注 | 13 |
|---|---|---|
| 项目管理 | 18 |雪狼 | 19 |发起、协调、杂务 | 20 |
| 网站/CI/运维 | 23 |why520crazy | 24 |官方www.ngnice.com的主要维护人员 | 25 |
| 程序员 | 28 |雪狼, Ken, zxsoft, why520crazy, playing，天猪,Leonardo | 29 |只列出有提交的部分，随时增补 | 30 |
| 顾问 | 33 |破狼 | 34 |参与但尚无提交的程序员，或时间有限只做peer review的人员 | 35 |
| 测试 | 38 |playing, jacobdong, 天猪 | 39 |请到github中提issue，确认bug后即增补在此 | 40 |
4 |
27 | -
5 |
-
6 | 7 | 8 |11 |
9 | {{country.label}} 10 |
-
12 |
-
13 | 14 | 15 | {{province.label}} 16 |17 |
-
18 |
- 19 | {{city.label}} 20 | 21 |
23 |
25 | -
13 |
国家：![]()
{{vm.country.label}} 省份：{{vm.province.label}}
28 | 城市：{{vm.city.label}}
29 |
30 |
31 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/background/background.css:
--------------------------------------------------------------------------------
1 | .wrapper{ width: 424px;margin: 10px auto; zoom:1;position: relative}
2 | .tabbody{height:225px;}
3 | .tabbody .panel { position: absolute;width:100%; height:100%;background: #fff; display: none;}
4 | .tabbody .focus { display: block;}
5 |
6 | body{font-size: 12px;color: #888;overflow: hidden;}
7 | input,label{vertical-align:middle}
8 | .clear{clear: both;}
9 | .pl{padding-left: 18px;padding-left: 23px\9;}
10 |
11 | #imageList {width: 420px;height: 215px;margin-top: 10px;overflow: hidden;overflow-y: auto;}
12 | #imageList div {float: left;width: 100px;height: 95px;margin: 5px 10px;}
13 | #imageList img {cursor: pointer;border: 2px solid white;}
14 |
15 | .bgarea{margin: 10px;padding: 5px;height: 84%;border: 1px solid #A8A297;}
16 | .content div{margin: 10px 0 10px 5px;}
17 | .content .iptradio{margin: 0px 5px 5px 0px;}
18 | .txt{width:280px;}
19 |
20 | .wrapcolor{height: 19px;}
21 | div.color{float: left;margin: 0;}
22 | #colorPicker{width: 17px;height: 17px;border: 1px solid #CCC;display: inline-block;border-radius: 3px;box-shadow: 2px 2px 5px #D3D6DA;margin: 0;float: left;}
23 | div.alignment,#custom{margin-left: 23px;margin-left: 28px\9;}
24 | #custom input{height: 15px;min-height: 15px;width:20px;}
25 | #repeatType{width:100px;}
--------------------------------------------------------------------------------
/app/scripts/config/city-data.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').constant('CityData', [
4 | {
5 | label: '中国',
6 | flag: 'cn.png',
7 | provinces: [
8 | {
9 | label: '北京',
10 | cities: [
11 | {
12 | label: '朝阳区'
13 | },
14 | {
15 | label: '宣武区'
16 | },
17 | {
18 | label: '海淀区'
19 | }
20 | ]
21 | },
22 | {
23 | label: '河北',
24 | cities: [
25 | {
26 | label: '石家庄'
27 | },
28 | {
29 | label: '承德'
30 | },
31 | {
32 | label: '唐山'
33 | }
34 | ]
35 | }
36 | ]
37 | },
38 | {
39 | label: '美国',
40 | flag: 'us.png',
41 | provinces: [
42 | {
43 | label: '纽约',
44 | cities: [
45 | {
46 | label: '曼哈顿区'
47 | },
48 | {
49 | label: '皇后区'
50 | }
51 | ]
52 | },
53 | {
54 | label: '德克萨斯州',
55 | cities: [
56 | {
57 | label: '休斯顿'
58 | },
59 | {
60 | label: '达拉斯'
61 | }
62 | ]
63 | },
64 | {
65 | label: '加利福尼亚州'
66 | }
67 | ]
68 | }
69 | ]);
--------------------------------------------------------------------------------
/app/views/home/home.html:
--------------------------------------------------------------------------------
1 | 这是一个基于angular的界面元素范例程序，基于bootstrap 3框架，优先使用内置指令来完成。 其目标是做一个类似smartclient等控件包的showcase程序，展示angular的能力，同时作为精简的备查资料。
2 | 3 | 如果喜欢本项目，请点： 4 | 6 | 8 |
9 |
一些说明（随时增补）
10 |-
11 |
- 12 | 我们的官方repo在这里。欢迎有一定水平和空闲时间的程序员报名参与开发，同时，欢迎提issue，如果issue被采纳，您将被列入贡献者名单。 13 | 14 |
- 15 | 为了便于理解和拷贝，这里没有严格遵循“view中避免写逻辑”的原则，所以会发现有诸如item.$checked = 16 | !item.$checked之类的代码，这种风格在showcase项目中有其价值，但是在实际应用中建议改写为vm.toggle(item)的形式，参见 TreeData范例 。 18 | 19 |
- 20 | 本程序深度依赖bootstrap来实现界面，如果您对bootstrap不熟，请参见 官方网站 或 21 | 中文资料站。 22 | 23 |
27 |
28 |
29 |
30 |
40 |
--------------------------------------------------------------------------------
/app/views/select/multiple.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
37 |
38 |
4 |
5 |
7 |
8 |
36 | 选择结果：
39 |
40 | {{select}}
41 |
42 |
43 |
--------------------------------------------------------------------------------
/app/views/utils/modal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 说明
30 |-
31 |
- 使用bootstrap的内置样式和指令完成的模态框控件。 32 |
- 33 | 还可采用来自angular-bootstrap封装的指令，请参考 34 | 官方Demo 35 | 。 36 | 37 |
把对象作为value
2 | 6 |您输入的是：{{vm.value}}
7 |
8 |
9 | 把code作为value
10 | 14 |您输入的是：{{vm.codeValue}}
15 |
16 |
17 | 分组
18 | 23 |您输入的是：{{vm.groupedValue}}
24 |
25 |
26 | track by
27 | 33 | 选择魔都 34 | 选择上海 35 |您输入的是：{{vm.trackValue}}
36 |
37 | track by 可以让匹配的时候只比较特定的字段，而忽略其他字段，并且不做对象的引用比较
38 |
39 |
40 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/third-party/highcharts/modules/no-data-to-display.js:
--------------------------------------------------------------------------------
1 | /*
2 | Highcharts JS v3.0.6 (2013-10-04)
3 | Plugin for displaying a message when there is no data visible in chart.
4 |
5 | (c) 2010-2013 Highsoft AS
6 | Author: Øystein Moseng
7 |
8 | License: www.highcharts.com/license
9 | */
10 | (function(c){function f(){return!!this.points.length}function g(){this.hasData()?this.hideNoData():this.showNoData()}var d=c.seriesTypes,e=c.Chart.prototype,h=c.getOptions(),i=c.extend;i(h.lang,{noData:"No data to display"});h.noData={position:{x:0,y:0,align:"center",verticalAlign:"middle"},attr:{},style:{fontWeight:"bold",fontSize:"12px",color:"#60606a"}};d.pie.prototype.hasData=f;if(d.gauge)d.gauge.prototype.hasData=f;if(d.waterfall)d.waterfall.prototype.hasData=f;c.Series.prototype.hasData=function(){return this.dataMax!==
11 | void 0&&this.dataMin!==void 0};e.showNoData=function(a){var b=this.options,a=a||b.lang.noData,b=b.noData;if(!this.noDataLabel)this.noDataLabel=this.renderer.label(a,0,0,null,null,null,null,null,"no-data").attr(b.attr).css(b.style).add(),this.noDataLabel.align(i(this.noDataLabel.getBBox(),b.position),!1,"plotBox")};e.hideNoData=function(){if(this.noDataLabel)this.noDataLabel=this.noDataLabel.destroy()};e.hasData=function(){for(var a=this.series,b=a.length;b--;)if(a[b].hasData()&&!a[b].options.isInternal)return!0;
12 | return!1};e.callbacks.push(function(a){c.addEvent(a,"load",g);c.addEvent(a,"redraw",g)})})(Highcharts);
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ngshowcase",
3 | "version": "0.0.0",
4 | "dependencies": {
5 | "nvd3": "~1.1.15"
6 | },
7 | "devDependencies": {
8 | "connect-livereload": "^0.5.3",
9 | "grunt": "^0.4.5",
10 | "grunt-autoprefixer": "~0.4.0",
11 | "grunt-bower-install": "~1.0.0",
12 | "grunt-concurrent": "~0.5.0",
13 | "grunt-connect-proxy": "~0.1.10",
14 | "grunt-contrib-clean": "~0.5.0",
15 | "grunt-contrib-concat": "~0.3.0",
16 | "grunt-contrib-connect": "~0.5.0",
17 | "grunt-contrib-copy": "~0.4.1",
18 | "grunt-contrib-cssmin": "~0.7.0",
19 | "grunt-contrib-htmlmin": "~0.1.3",
20 | "grunt-contrib-imagemin": "~0.3.0",
21 | "grunt-contrib-jshint": "~0.7.1",
22 | "grunt-contrib-uglify": "~0.2.0",
23 | "grunt-contrib-watch": "~0.5.2",
24 | "grunt-google-cdn": "~0.2.0",
25 | "grunt-karma": "~0.8.3",
26 | "grunt-newer": "~0.6.1",
27 | "grunt-ngmin": "~0.0.2",
28 | "grunt-rev": "~0.1.0",
29 | "grunt-svgmin": "~0.2.0",
30 | "grunt-usemin": "~2.0.0",
31 | "jshint-stylish": "~0.1.3",
32 | "karma": "~0.12.14",
33 | "karma-jasmine": "~0.1.5",
34 | "karma-ng-html2js-preprocessor": "~0.1.0",
35 | "karma-ng-scenario": "~0.1.0",
36 | "karma-phantomjs-launcher": "~0.1.4",
37 | "load-grunt-tasks": "~0.4.0",
38 | "time-grunt": "~0.2.1"
39 | },
40 | "engines": {
41 | "node": ">=0.10.0"
42 | },
43 | "scripts": {
44 | "test": "grunt test"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/app/scripts/directives/common/masked.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * 掩码输入框，仿jquery.inputmask
5 | */
6 | angular.module('scHelper').directive('scMasked', function() {
7 | function parseByMask(value, mask) {
8 | return value;//.toUpperCase();
9 | }
10 | function formatByMask(value, mask) {
11 | return value.replace(mask, function(v1, v2) {
12 | debugger
13 | });
14 | }
15 | return {
16 | restrict: 'A',
17 | scope: {
18 | mask: '=scMasked'
19 | },
20 | require: 'ngModel',
21 | link: function($scope, $element, attrs, ngModel) {
22 | var mask = attrs['scMasked'];
23 | var regexp = mask.replace(/9/g, '(\\d)');
24 | ngModel.$viewValue = regexp;
25 | // 不管怎么显示，总是净化之后发给ng-model
26 | ngModel.$parsers.push(function(value) {
27 | if (angular.isUndefined(value))
28 | return value;
29 | return parseByMask(value, regexp);
30 | });
31 | ngModel.$formatters.push(function(value) {
32 | return formatByMask(value, regexp);
33 | });
34 | // ngModel变化的时候立刻更新value属性
35 | ngModel.$viewChangeListeners.push(function() {
36 | var input = $element[0];
37 | // 保存光标位置
38 | var start = input.selectionStart;
39 | var end = input.selectionEnd;
40 | $element.val(formatByMask(ngModel.$viewValue, regexp));
41 | // 恢复光标位置
42 | input.selectionStart = start;
43 | input.selectionEnd = end;
44 | });
45 | }
46 | }
47 | });
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Angular范例集
2 | ============
3 | 这是一个基于angular的界面元素范例程序，基于bootstrap 3框架，优先使用内置指令来完成。
4 | 其目标是做一个类似smartclient等控件包的showcase程序，展示angular的能力，同时作为精简的备查字典。
5 |
6 | 当前进展：刚刚开始。
7 |
8 | 在线预览：http://www.ngnice.com/showcase/
9 |
10 | 注意：
11 |
12 | 1. clone下去之后，请先确保有node环境，然后执行npm install和bower install命令，以便对grunt环境进行初始化。
13 | 之后就可以用grunt serve来启动服务器进行查看和调试了。
14 | 2. 如果使用windows系统，请务必在提交更改前用下列命令配置git： git config core.autocrlf input 我们统一使用unix的行结尾风格提交，以免出现不必要的修改。
15 | 3. 建议修改前先调用git pull --rebase拉取一下远端代码，以免出现不必要的冲突。
16 | 4. 请把所有文件中的缩进都设置为2空格，以免出现不必要的修改。
17 | 5. 如果要参与开发，请先看看本项目的wiki，我会把一些开发中的注意事项随时放在里面。
18 |
19 | 总体原则
20 | ------------
21 |
22 | 1. 参照smartclient的demo实现
23 | 2. 优先使用内置指令实现，除非能证明有显著优势，否则不要封装自定义指令
24 | 3. 候选方案顺序 内置指令 > filter > service > 自定义指令
25 | 4. 任何会修改数据的操作均通过ng-model完成
26 | 5. css框架统一使用bootstrap 3
27 | 6. 复杂的控件尽量用封装适当的jquery控件或bootstrap控件的方式进行，但是不要依赖jquery-ui
28 | 7. 如果有可以实现此功能的成熟的第三方指令，可以直接使用它并链接到它的开发页和demo页。注意，这里使用的第三方指令必须是足够成熟、友好的。
29 |
30 | 组织方式
31 | ------------
32 |
33 | 1. 通过issue进行沟通
34 | 2. 可以通过把issue assign给自己的方式主动认领任务
35 | 3. 在对程序有一定程度理解的基础上，可以自行调整菜单甚至代码结构。如果觉得不是很有把握，请在群里提出讨论。
36 | 4. 定期review，对功能规划进行审议，可能会进行菜单调整或功能合并。但不会因为把某人实现的功能移出菜单而将其移出贡献列表。
37 |
38 | 分工
39 | ------------
40 |
41 | 1. 构建基于github的CI环境，并支持自动发布
42 | 2. 开发一个界面框架，能让访客体验操作并现场查看源码，仿smartclient的demo
43 | 3. 所有人均可报名参加用户化测试
44 | 4. 产品组负责把关filter/directive等界面元素的描述性，并纠正命名不当等问题
45 | 5. 多语言组负责开发多语言界面
46 |
47 | 目标
48 | ------------
49 |
50 | 1. 基本输入指令
51 | 2. grid
52 | 3. tree
53 | 4. 表单及校验
54 | 5. 对话框
55 | 6. 综合demo
56 |
57 | 其他目标可在开发过程中增补
58 |
--------------------------------------------------------------------------------
/app/scripts/controllers/stat/chart.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.stat.chart', function ($scope) {
4 | var vm = $scope.vm = {};
5 | vm.chart = undefined;
6 | vm.setTitle = function(title) {
7 | vm.chart.xAxis[0].setTitle({text: title});
8 | };
9 | vm.config = {
10 | chart: {
11 | plotBackgroundColor: 'rgba(255, 255, 255, .9)',
12 | plotShadow: true,
13 | height: 400,
14 | // plotBorderWidth: 1,
15 | type: 'line'
16 | },
17 | title: {
18 | text: '月平均气温'
19 | },
20 | subtitle: {
21 | text: '来源: WorldClimate.com'
22 | },
23 | xAxis: {
24 | title: {
25 | text: '月份'
26 | },
27 | categories: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
28 | },
29 | yAxis: {
30 | title: {
31 | text: '温度(°C)'
32 | }
33 | },
34 | tooltip: {
35 | enabled: true,
36 | formatter: function() {
37 | return ''+ this.series.name +''+this.x +': '+ this.y +'°C'; 38 | } 39 | }, 40 | plotOptions: { 41 | line: { 42 | dataLabels: { 43 | enabled: true 44 | }, 45 | enableMouseTracking: true 46 | } 47 | }, 48 | series: [{ 49 | name: '东京', 50 | data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 51 | }, { 52 | name: '伦敦', 53 | data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 54 | }] 55 | }; 56 | }); 57 | -------------------------------------------------------------------------------- /app/views/animation/choiceitems.json: -------------------------------------------------------------------------------- 1 | {"Attention Seekers":["bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello"], 2 | "Bouncing Entrances":["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp"], 3 | "Bouncing Exits":["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp"], 4 | "Fading Entrances":["fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig"], 5 | "Fading Exits":["fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig"], 6 | "Flippers":["flip","flipInX","flipInY","fadeOutLeft","flipOutX","flipOutY"], 7 | "Lightspeed":["lightSpeedIn","lightSpeedOut"], 8 | "Rotating Entrances":["rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight"], 9 | "Rotating Exits":["rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight"], 10 | "Sliding Entrances":["slideInUp","slideInDown","slideInLeft","slideInRight"], 11 | "Sliding Exits":["slideOutUp","slideOutDown","slideOutLeft","slideOutRight"], 12 | "Zoom Entrances":["zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"], 13 | "Zoom Exits":["zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"], 14 | "Specials":["hinge","rollIn","rollOut"]} 15 | 16 | [{ 17 | "group": "Attention Seekers", 18 | "value":"bounce", 19 | "value":"label" 20 | }, 21 | { 22 | "group": "Attention Seekers", 23 | "value": "flash" 24 | "label": "flash" 25 | }] 26 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/jsp/getMovie.jsp: -------------------------------------------------------------------------------- 1 | <%@ page language="java" pageEncoding="utf-8"%> 2 | <%@ page import="java.io.BufferedReader"%> 3 | <%@ page import="java.io.IOException"%> 4 | <%@ page import="java.io.InputStream"%> 5 | <%@ page import="java.io.InputStreamReader"%> 6 | <%@ page import="java.net.MalformedURLException"%> 7 | <%@ page import="java.net.URL"%> 8 | <%@ page import="java.net.URLEncoder"%> 9 | <%@ page import="java.net.URLConnection"%> 10 | <% 11 | request.setCharacterEncoding("utf-8"); 12 | response.setCharacterEncoding("utf-8"); 13 | StringBuffer readOneLineBuff = new StringBuffer(); 14 | String content =""; 15 | String searchkey = request.getParameter("searchKey"); 16 | String videotype = request.getParameter("videoType"); 17 | try { 18 | searchkey = URLEncoder.encode(searchkey,"utf-8"); 19 | URL url = new URL("http://api.tudou.com/v3/gw?method=item.search&appKey=myKey&format=json&kw="+ searchkey+"&pageNo=1&pageSize=20&channelId="+videotype+"&inDays=7&media=v&sort=s"); 20 | URLConnection conn = url.openConnection(); 21 | BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(),"utf-8")); 22 | String line = ""; 23 | while ((line = reader.readLine()) != null) { 24 | readOneLineBuff.append(line); 25 | } 26 | content = readOneLineBuff.toString(); 27 | reader.close(); 28 | } catch (MalformedURLException e) { 29 | e.printStackTrace(); 30 | } catch (IOException e2) { 31 | e2.printStackTrace(); 32 | } 33 | response.getWriter().print(content); 34 | %> -------------------------------------------------------------------------------- /karma-e2e.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | // base path, that will be used to resolve files and exclude 7 | basePath: '', 8 | 9 | // testing framework to use (jasmine/mocha/qunit/...) 10 | frameworks: ['ng-scenario'], 11 | 12 | // list of files / patterns to load in the browser 13 | files: [ 14 | 'test/e2e/**/*.js' 15 | ], 16 | 17 | // list of files / patterns to exclude 18 | exclude: [], 19 | 20 | // web server port 21 | port: 8080, 22 | 23 | // level of logging 24 | // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 25 | logLevel: config.LOG_INFO, 26 | 27 | 28 | // enable / disable watching file and executing tests whenever any file changes 29 | autoWatch: false, 30 | 31 | 32 | // Start these browsers, currently available: 33 | // - Chrome 34 | // - ChromeCanary 35 | // - Firefox 36 | // - Opera 37 | // - Safari (only Mac) 38 | // - PhantomJS 39 | // - IE (only Windows) 40 | browsers: ['Chrome'], 41 | 42 | 43 | // Continuous Integration mode 44 | // if true, it capture browsers, run tests and exit 45 | singleRun: false 46 | 47 | // Uncomment the following lines if you are using grunt's server to run the tests 48 | // proxies: { 49 | // '/': 'http://localhost:9000/' 50 | // }, 51 | // URL root prevent conflicts with the site root 52 | // urlRoot: '_karma_' 53 | }); 54 | }; 55 | -------------------------------------------------------------------------------- /app/scripts/controllers/tree/treeData.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.tree.treeData', function ($scope, TreeData) { 4 | var vm = $scope.vm = {}; 5 | 6 | vm.countries = [ 7 | { 8 | label: '中国', 9 | flag: 'cn.png', 10 | items: [ 11 | { 12 | label: '北京', 13 | items: [ 14 | { 15 | label: '朝阳区' 16 | }, 17 | { 18 | label: '宣武区' 19 | }, 20 | { 21 | label: '海淀区' 22 | } 23 | ] 24 | }, 25 | { 26 | label: '河北', 27 | items: [ 28 | { 29 | label: '石家庄' 30 | }, 31 | { 32 | label: '承德' 33 | }, 34 | { 35 | label: '唐山' 36 | } 37 | ] 38 | } 39 | ] 40 | }, 41 | { 42 | label: '美国', 43 | flag: 'us.png', 44 | items: [ 45 | { 46 | label: '纽约', 47 | items: [ 48 | { 49 | label: '曼哈顿区' 50 | }, 51 | { 52 | label: '皇后区' 53 | } 54 | ] 55 | }, 56 | { 57 | label: '德克萨斯州', 58 | items: [ 59 | { 60 | label: '休斯顿' 61 | }, 62 | { 63 | label: '达拉斯' 64 | } 65 | ] 66 | }, 67 | { 68 | label: '加利福尼亚州' 69 | } 70 | ] 71 | } 72 | ]; 73 | vm.tree = new TreeData(vm.countries); 74 | }); 75 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/table/edittable.css: -------------------------------------------------------------------------------- 1 | body{ 2 | overflow: hidden; 3 | width: 540px; 4 | } 5 | .wrapper { 6 | margin: 10px auto 0; 7 | font-size: 12px; 8 | overflow: hidden; 9 | width: 520px; 10 | height: 315px; 11 | } 12 | 13 | .clear { 14 | clear: both; 15 | } 16 | 17 | .wrapper .left { 18 | float: left; 19 | margin-left: 10px;; 20 | } 21 | 22 | .wrapper .right { 23 | float: right; 24 | border-left: 2px dotted #EDEDED; 25 | padding-left: 15px; 26 | } 27 | 28 | .section { 29 | margin-bottom: 15px; 30 | width: 240px; 31 | overflow: hidden; 32 | } 33 | 34 | .section h3 { 35 | font-weight: bold; 36 | padding: 5px 0; 37 | margin-bottom: 10px; 38 | border-bottom: 1px solid #EDEDED; 39 | font-size: 12px; 40 | } 41 | 42 | .section ul { 43 | list-style: none; 44 | overflow: hidden; 45 | clear: both; 46 | 47 | } 48 | 49 | .section li { 50 | float: left; 51 | width: 120px;; 52 | } 53 | 54 | .section .tone { 55 | width: 80px;; 56 | } 57 | 58 | .section .preview { 59 | width: 220px; 60 | } 61 | 62 | .section .preview table { 63 | text-align: center; 64 | vertical-align: middle; 65 | color: #666; 66 | } 67 | 68 | .section .preview caption { 69 | font-weight: bold; 70 | } 71 | 72 | .section .preview td { 73 | border-width: 1px; 74 | border-style: solid; 75 | height: 22px; 76 | } 77 | 78 | .section .preview th { 79 | border-style: solid; 80 | border-color: #DDD; 81 | border-width: 2px 1px 1px 1px; 82 | height: 22px; 83 | background-color: #F7F7F7; 84 | } -------------------------------------------------------------------------------- /app/views/input/html5.html: -------------------------------------------------------------------------------- 1 |
HTML5组件
2 |
3 | 这里展示的是一组基本HTML5组件，它们都能和ng-model配合工作
4 |
5 |
6 | 单行文本
7 | 8 | 9 |您输入的是：{{vm.text}}
10 |
11 |
12 | 搜索框
13 | 14 | 15 |您输入的是：{{vm.search}}
16 |
17 |
18 | 多行文本
19 | 20 | 21 |您输入的是：
22 |
24 |
25 |
26 | {{vm.textarea}}
23 | 数字
27 | 28 | 29 |您输入的是：{{vm.number}}
30 |
31 |
32 | 链接
33 | 34 | 35 |您输入的是：{{vm.url}}
36 |
37 |
38 | 邮件地址
39 | 40 | 41 |您输入的是：{{vm.email}}
42 |
43 |
44 | 月份
45 | 46 | 47 |您输入的是：{{vm.month}}
48 |
49 |
50 | 周
51 | 52 | 53 |您输入的是：{{vm.week}}
54 |
55 |
56 | 日期
57 | 58 | 59 |您输入的是：{{vm.date}}
60 |
61 |
62 | 时间
63 | 64 | 65 |您输入的是：{{vm.time}}
66 |
67 |
68 | 颜色
69 | 70 | 71 |您输入的是：{{vm.color}}
72 |
73 |
74 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/jsp/fileUp.jsp:
--------------------------------------------------------------------------------
1 | <%@page import="java.io.File"%>
2 | <%@page import="java.util.Properties"%>
3 | <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
4 | <%@ page import="ueditor.Uploader" %>
5 | <%@ page import="java.io.FileInputStream" %>
6 |
7 |
8 | <%
9 | request.setCharacterEncoding( Uploader.ENCODEING );
10 | response.setCharacterEncoding( Uploader.ENCODEING );
11 |
12 | String currentPath = request.getRequestURI().replace( request.getContextPath(), "" );
13 |
14 | File currentFile = new File( currentPath );
15 |
16 | currentPath = currentFile.getParent() + File.separator;
17 |
18 | //加载配置文件
19 | String propertiesPath = request.getSession().getServletContext().getRealPath( currentPath + "config.properties" );
20 | Properties properties = new Properties();
21 | try {
22 | properties.load( new FileInputStream( propertiesPath ) );
23 | } catch ( Exception e ) {
24 | //加载失败的处理
25 | e.printStackTrace();
26 | }
27 |
28 | Uploader up = new Uploader(request);
29 |
30 | up.setSavePath("upload"); //保存路径
31 | String[] fileType = {".rar" , ".doc" , ".docx" , ".zip" , ".pdf" , ".txt" , ".swf", ".wmv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".mov", ".wmv", ".mp4"}; //允许的文件类型
32 | up.setAllowFiles(fileType);
33 | up.setMaxSize(500 * 1024); //允许的文件最大尺寸，单位KB
34 | up.upload();
35 | response.getWriter().print("{'url':'"+up.getUrl()+"','fileType':'"+up.getType()+"','state':'"+up.getState()+"','original':'"+up.getOriginalName()+"'}");
36 |
37 | %>
38 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/charts/chart.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 图表配置文件
3 | * */
4 |
5 |
6 | //不同类型的配置
7 | var typeConfig = [
8 | {
9 | chart: {
10 | type: 'line'
11 | },
12 | plotOptions: {
13 | line: {
14 | dataLabels: {
15 | enabled: false
16 | },
17 | enableMouseTracking: true
18 | }
19 | }
20 | }, {
21 | chart: {
22 | type: 'line'
23 | },
24 | plotOptions: {
25 | line: {
26 | dataLabels: {
27 | enabled: true
28 | },
29 | enableMouseTracking: false
30 | }
31 | }
32 | }, {
33 | chart: {
34 | type: 'area'
35 | }
36 | }, {
37 | chart: {
38 | type: 'bar'
39 | }
40 | }, {
41 | chart: {
42 | type: 'column'
43 | }
44 | }, {
45 | chart: {
46 | plotBackgroundColor: null,
47 | plotBorderWidth: null,
48 | plotShadow: false
49 | },
50 | plotOptions: {
51 | pie: {
52 | allowPointSelect: true,
53 | cursor: 'pointer',
54 | dataLabels: {
55 | enabled: true,
56 | color: '#000000',
57 | connectorColor: '#000000',
58 | formatter: function() {
59 | return ''+ this.point.name +': '+ ( Math.round( this.point.percentage*100 ) / 100 ) +' %';
60 | }
61 | }
62 | }
63 | }
64 | }
65 | ];
66 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/help/help.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created with JetBrains PhpStorm.
3 | * User: xuheng
4 | * Date: 12-9-26
5 | * Time: 下午1:06
6 | * To change this template use File | Settings | File Templates.
7 | */
8 | /**
9 | * tab点击处理事件
10 | * @param tabHeads
11 | * @param tabBodys
12 | * @param obj
13 | */
14 | function clickHandler( tabHeads,tabBodys,obj ) {
15 | //head样式更改
16 | for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
17 | tabHeads[k].className = "";
18 | }
19 | obj.className = "focus";
20 | //body显隐
21 | var tabSrc = obj.getAttribute( "tabSrc" );
22 | for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
23 | var body = tabBodys[j],
24 | id = body.getAttribute( "id" );
25 | body.onclick = function(){
26 | this.style.zoom = 1;
27 | };
28 | if ( id != tabSrc ) {
29 | body.style.zIndex = 1;
30 | } else {
31 | body.style.zIndex = 200;
32 | }
33 | }
34 |
35 | }
36 |
37 | /**
38 | * TAB切换
39 | * @param tabParentId tab的父节点ID或者对象本身
40 | */
41 | function switchTab( tabParentId ) {
42 | var tabElements = $G( tabParentId ).children,
43 | tabHeads = tabElements[0].children,
44 | tabBodys = tabElements[1].children;
45 |
46 | for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
47 | var head = tabHeads[i];
48 | if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
49 | head.onclick = function () {
50 | clickHandler(tabHeads,tabBodys,this);
51 | }
52 | }
53 | }
54 | switchTab("helptab");
55 |
56 | document.getElementById('version').innerHTML = parent.UE.version
--------------------------------------------------------------------------------
/app/scripts/controllers/integrated/cart.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | angular.module('ngShowcaseApp').controller('ctrl.integrated.cart', function ($scope) {
4 | var vm = $scope.vm = {};
5 | vm.items = [
6 | {
7 | code: '10001',
8 | label: '苹果手机',
9 | description: '苹果5S，最新款，最精致的手机',
10 | price: '5000',
11 | thumbnail: 'sj.jpg'
12 | },
13 | {
14 | code: '20001',
15 | label: '美的电磁炉',
16 | description: '美的出产的电磁炉，配合苹果手机使用效果更佳',
17 | price: '1000',
18 | thumbnail: 'dcl.jpg'
19 | }
20 | ];
21 | vm.cart = {
22 | label: '张三的购物车',
23 | lines: []
24 | };
25 | vm.addToCart = function addToCart(item) {
26 | if (!item.code)
27 | return;
28 | var line = _.findWhere(vm.cart.lines, {code: item.code});
29 | if (!line) {
30 | line = _.extend({}, item, {quantity: 1});
31 | vm.cart.lines.push(line);
32 | } else {
33 | ++line.quantity;
34 | }
35 | };
36 | vm.cartCount = function() {
37 | return _.reduce(vm.cart.lines, function(memo, line) {return memo + line.quantity}, 0);
38 | };
39 | vm.cartTotal = function() {
40 | return _.reduce(vm.cart.lines, function(memo, line) {return memo + line.price * line.quantity}, 0);
41 | };
42 | vm.incrementQuantity = function(line) {
43 | line.quantity++;
44 | };
45 | vm.decrementQuantity = function(line) {
46 | if (line.quantity <= 0)
47 | return;
48 | --line.quantity
49 | };
50 | vm.removeFromCart = function(line) {
51 | vm.cart.lines = _.reject(vm.cart.lines, function(item){ return line.code === item.code});
52 | };
53 | vm.buy = function buy(item) {
54 | if (!item.code)
55 | return;
56 | vm.cart.lines = [_.extend({}, item, {quantity: 1})];
57 | };
58 | });
59 |
--------------------------------------------------------------------------------
/app/views/table/basic.html:
--------------------------------------------------------------------------------
1 | | 5 | | 姓名 | 6 |详情 | 7 |操作 | 8 |||
|---|---|---|---|---|---|
| 粉丝数 | 11 |生日 | 12 |收入 | 13 ||||
| 18 | | {{item.name}} | 19 |{{item.followers|number}} | 20 |{{item.birthday|date}} ({{vm.age(item.birthday)}}岁) | 21 |{{item.income|currency}} | 22 |23 | 25 | 26 | 35 | | 36 |
选中的项：
40 | ,
42 |
43 |
44 |
45 | 40 | ,
42 |
说明
46 | 请注意：angular的活动binding（比如$watch, {{}}表达式，ng-bind等）数量应避免超过2000个，否则在老版本ie等浏览器上会导致性能急剧下降。 47 |48 | 解决大表数据问题的方法请参见百万行大表 49 | -------------------------------------------------------------------------------- /app/scripts/controllers/form/customValidation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp') 4 | .controller('ctrl.form.customValidation', ['$scope', function ($scope) { 5 | var vm = $scope.vm = { 6 | show_error: false, 7 | show_type: 1, 8 | user: {} 9 | }; 10 | 11 | vm.submit = function (basic_form) { 12 | vm.show_error = true; 13 | basic_form.$setDirty(); 14 | if (basic_form.$valid) { 15 | alert("提交成功！"); 16 | } 17 | }; 18 | 19 | vm.change_show_type = function (form) { 20 | if (vm.show_type == 2) { 21 | vm.show_error = true; 22 | } else { 23 | vm.show_error = false; 24 | } 25 | 26 | // 重置表单 27 | vm.user = {}; 28 | form.$setPristine(); 29 | 30 | } 31 | }]) 32 | .directive("multipleEmail", [function () { 33 | return { 34 | restrict: 'A', 35 | require: "ngModel", 36 | link: function (scope, element, attr, ctrl) { 37 | if (ctrl) { 38 | var EMAILS_REGEXP = /^([a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i; 39 | var customValidator = function (value) { 40 | var validity = ctrl.$isEmpty(value) || EMAILS_REGEXP.test(value) 41 | ctrl.$setValidity("multipleEmail", validity); 42 | return validity ? value : undefined; 43 | }; 44 | ctrl.$formatters.push(customValidator); 45 | ctrl.$parsers.push(customValidator); 46 | } 47 | } 48 | }; 49 | }]); 50 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/anchor/anchor.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 |
16 |
17 |
18 |
19 |
39 |
40 |
--------------------------------------------------------------------------------
/app/views/tree/checkbox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
35 |
36 |
37 | -
4 |
-
5 | 6 | 8 | 9 | 10 |14 |
11 | {{country.label}} 12 | 13 |
-
15 |
-
16 |
18 |
19 |
20 | {{province.label}}
21 |
22 |
-
23 |
- 24 | 28 | 29 |
31 |
33 | -
16 |
18 |
19 |
20 | {{province.label}}
21 |
22 |
说明
38 | 这是一个使用controller中的逻辑来实现级联复选框的表，可以支持级联选择以及半选中（semi-checked）状态 39 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/music/music.css: -------------------------------------------------------------------------------- 1 | .wrapper{margin: 5px 10px;} 2 | 3 | .searchBar{height:30px;padding:7px 0 3px;text-align:center;} 4 | .searchBtn{font-size:13px;height:24px;} 5 | 6 | .resultBar{width:460px;margin:5px auto;border: 1px solid #CCC;border-radius: 5px;box-shadow: 2px 2px 5px #D3D6DA;overflow: hidden;} 7 | 8 | .listPanel{overflow: hidden;} 9 | .panelon{display:block;} 10 | .paneloff{display:none} 11 | 12 | .page{width:220px;margin:20px auto;overflow: hidden;} 13 | .pageon{float:right;width:24px;line-height:24px;height:24px;margin-right: 5px;background: none;border: none;color: #000;font-weight: bold;text-align:center} 14 | .pageoff{float:right;width:24px;line-height:24px;height:24px;cursor:pointer;background-color: #fff; 15 | border: 1px solid #E7ECF0;color: #2D64B3;margin-right: 5px;text-decoration: none;text-align:center;} 16 | 17 | .m-box{width:460px;} 18 | .m-m{float: left;line-height: 20px;height: 20px;} 19 | .m-h{height:24px;line-height:24px;padding-left: 46px;background-color:#FAFAFA;border-bottom: 1px solid #DAD8D8;font-weight: bold;font-size: 12px;color: #333;} 20 | .m-l{float:left;width:40px; } 21 | .m-t{float:left;width:140px;} 22 | .m-s{float:left;width:110px;} 23 | .m-z{float:left;width:100px;} 24 | .m-try-t{float: left;width: 60px;;} 25 | 26 | .m-try{float:left;width:20px;height:20px;background:url('http://static.tieba.baidu.com/tb/editor/images/try_music.gif') no-repeat ;} 27 | .m-trying{float:left;width:20px;height:20px;background:url('http://static.tieba.baidu.com/tb/editor/images/stop_music.gif') no-repeat ;} 28 | 29 | .loading{width:95px;height:7px;font-size:7px;margin:60px auto;background:url(http://static.tieba.baidu.com/tb/editor/images/loading.gif) no-repeat} 30 | .empty{width:300px;height:40px;padding:2px;margin:50px auto;line-height:40px; color:#006699;text-align:center;} -------------------------------------------------------------------------------- /app/scripts/directives/common/position.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * 设置所属元素的位置 5 | */ 6 | angular.module('scHelper').directive('scPosition', function() { 7 | return { 8 | restrict: 'A', 9 | scope: { 10 | rect: '=scPosition', 11 | left: '=scLeft', 12 | top: '=scTop', 13 | right: '=scRight', 14 | bottom: '=scBottom', 15 | width: '=scWidth', 16 | height: '=scHeight' 17 | }, 18 | link: function($scope, $element) { 19 | $scope.$watch('left', function(value) { 20 | if (value !== undefined) 21 | $element.css('left', value) 22 | }); 23 | $scope.$watch('top', function(value) { 24 | if (value !== undefined) 25 | $element.css('top', value) 26 | }); 27 | $scope.$watch('right', function(value) { 28 | if (value !== undefined) 29 | $element.css('right', value) 30 | }); 31 | $scope.$watch('bottom', function(value) { 32 | if (value !== undefined) 33 | $element.css('bottom', value) 34 | }); 35 | $scope.$watch('width', function(value) { 36 | if (value !== undefined) 37 | $element.width(value) 38 | }); 39 | $scope.$watch('height', function(value) { 40 | if (value !== undefined) 41 | $element.height(value) 42 | }); 43 | $scope.$watch('rect', function(value) { 44 | if (value !== undefined) { 45 | if (value.x !== undefined) 46 | $element.css('left', value.x); 47 | if (value.y !== undefined) 48 | $element.css('top', value.y); 49 | if (value.width !== undefined) 50 | $element.width(value.width); 51 | if (value.height !== undefined) 52 | $element.height(value.height); 53 | } 54 | }, true); 55 | } 56 | } 57 | }); -------------------------------------------------------------------------------- /app/scripts/controllers/table/local.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | angular.module('ngShowcaseApp').controller('ctrl.table.local', function ($scope) { 4 | var vm = $scope.vm = {}; 5 | vm.page = { 6 | size: 5, 7 | index: 1 8 | }; 9 | vm.sort = { 10 | column: 'id', 11 | direction: -1, 12 | toggle: function(column) { 13 | if (column.sortable === false) 14 | return; 15 | 16 | if (this.column === column.name) { 17 | this.direction = -this.direction || -1; 18 | } else { 19 | this.column = column.name; 20 | this.direction = -1; 21 | } 22 | } 23 | }; 24 | // 构建模拟数据 25 | vm.columns = [ 26 | { 27 | label: 'ID', 28 | name: 'id', 29 | type: 'string' 30 | }, 31 | { 32 | label: '姓名', 33 | name: 'name', 34 | type: 'string' 35 | }, 36 | { 37 | label: '粉丝数', 38 | name: 'followers', 39 | type: 'number' 40 | }, 41 | { 42 | label: '收入', 43 | name: 'income', 44 | type: 'currency' 45 | }, 46 | { 47 | label: '', 48 | name: 'actions', 49 | sortable: false 50 | } 51 | ]; 52 | // 供页面中使用的函数 53 | vm.age = function(birthday) { 54 | return moment().diff(birthday, 'years'); 55 | }; 56 | 57 | vm.items = []; 58 | var MAX_NUM = 10 * 1000; 59 | function rand(min, max) { 60 | return min + Math.round(Math.random() * (max-min)); 61 | } 62 | for (var i = 0; i < MAX_NUM; ++i) { 63 | var id = rand(0, MAX_NUM); 64 | vm.items.push({ 65 | id: i + 1, 66 | name: 'Name' + id, // 字符串类型 67 | followers: rand(0, 100 * 1000 * 1000), // 数字类型 68 | birthday: moment().subtract('day', rand(365, 365 * 50)).toDate(), // 日期类型 69 | summary: '这是一个测试' + i, 70 | income: rand(1000, 100000) // 金额类型 71 | }); 72 | } 73 | }); 74 | -------------------------------------------------------------------------------- /app/views/tree/treeData.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
35 |
36 |
37 | -
4 |
-
5 | 6 | 8 | 9 | 10 |14 |
11 | {{country.label}} 12 | 13 |
-
15 |
-
16 |
18 |
19 |
20 | {{province.label}}
21 |
22 |
-
23 |
- 24 | 28 | 29 |
31 |
33 | -
16 |
18 |
19 |
20 | {{province.label}}
21 |
22 |
说明
38 | 这是一个使用内部数据结构来封装级联逻辑的版本，相比directive来说，这种内部数据结构更容易测试，内聚性也更强。 39 | -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/template/template.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created with JetBrains PhpStorm. 3 | * User: xuheng 4 | * Date: 12-8-8 5 | * Time: 下午2:09 6 | * To change this template use File | Settings | File Templates. 7 | */ 8 | (function () { 9 | var me = editor, 10 | preview = $G( "preview" ), 11 | preitem = $G( "preitem" ), 12 | tmps = templates, 13 | currentTmp; 14 | var initPre = function () { 15 | var str = ""; 16 | for ( var i = 0, tmp; tmp = tmps[i++]; ) { 17 | str += '
19 |
20 |
21 |
22 |
60 |
61 |
--------------------------------------------------------------------------------
/app/thirdparty-libs/ueditor1_3_6-utf8-jsp/jsp/imageManager.jsp:
--------------------------------------------------------------------------------
1 | <%@ page language="java" pageEncoding="utf-8"%>
2 | <%@ page import="java.util.*"%>
3 | <%@ page import="java.io.*"%>
4 | <%@ page import="javax.servlet.ServletContext"%>
5 | <%@ page import="javax.servlet.http.HttpServletRequest"%>
6 | <%
7 | //仅做示例用，请自行修改
8 | String path = "upload";
9 | String imgStr ="";
10 | String realpath = getRealPath(request,path)+"/"+path;
11 | ListAngularJs
3 | 6 |AngularJs
7 |-
8 |
- 9 | {{item}} 10 | 11 | 12 |
14 |
28 |
29 |
15 | 透明度
16 |
17 | left
18 |
20 |
21 |
22 | top
23 |
24 | 时间
25 |
26 |
27 | 说明
30 |-
31 |
- 32 | 采用了第三方css类库Animate.css，具体信息以及参数请参考 33 | 官方文档 。 34 | 35 |
- 36 | 通过ng-model来实时修改classname 37 | 38 |
商品列表 / 购物车
4 |
5 |
23 |
24 |
25 |
6 |
22 |
7 | ![{{item.label}}]()
8 |
9 |
21 |
10 |
20 | {{item.label}} 11 | {{item.code}} 12 |
13 |{{item.description}}
14 | 15 | 17 | 立即购买 18 |
19 |{{vm.cart.label}}(共{{vm.cartCount()}}件 总计 {{vm.cartTotal()}} 元)
26 |请先添加商品
27 | | 产品编号 | 31 |产品名称 | 32 |购买数量 | 33 |操作 | 34 |
|---|---|---|---|
| {{line.code}} | 39 |{{line.label}} | 40 |41 | 43 | {{line.quantity}} 44 | 46 | | 47 |移除 | 49 |
选中的日期: {{vm.calendar | date:'fullDate' }}
2 |
3 | 普通样式
4 |
5 |
8 |
9 | 弹出样式
10 |
11 |
24 |
25 |
12 |
23 | 13 | 16 | 17 | 20 | 21 |
22 |
26 |
33 |
27 |
28 |
31 |
32 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
说明
42 |-
43 |
- 44 | 来自angular-bootstrap的第三方日历控件，更多功能和设置请参考 45 | 官方Demo。 46 | 47 |
- 48 | 日期输出格式使用了官方的Date过滤器， 49 | 查看更多。 50 | 51 |
- 本页翻译自其官方Demo。 52 |
外部放大器
3 |
4 |
16 |
5 | ![试验图片]()
7 |
8 |
9 |
10 |
11 |
12 | ![大图]()
14 |
15 | 内部放大器
17 |
18 | ![大图]()
20 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
21 | ![试验图片]()
23 |
24 |
25 |
26 | 说明
38 | 这里没有使用单一的大型指令去实现，而是遵循Angular的风格，实现了两个单一功能的小指令：resize和position（可在右侧查看源码）。 39 |40 | 它们用来和DOM做必要的交互，然后通过Zoom类和Rect类来实现大小图之间的映射。这种实现方式非常灵活，所以实现两种风格的放大器都不需要额外代码。 -------------------------------------------------------------------------------- /app/thirdparty-libs/ueditor1_3_6-utf8-jsp/dialogs/snapscreen/snapscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |