前言：在Web开发中常常会遇到这样的情况，有些页面的下拉选项是固定不变的几个，比如：性别，一般有男、女、保密等。对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码，如果是可维护的需要系统给出一些维护的界面，不断的对这些系统代码进行增删改的操作，如果是固定不变的，一般需要配置一下数据字典，下面我记录的这种方式就是在页面配置的一种方式。

1：示例演示文件的放置方式

2：SysCodeConfig.js文件，这个文件是系统代码配置的关键，也是变化的核心，这里可以配置自己的系统代码，系统代码只需要在第二部分进行添加就行了

/**

 * 1：模块声明部分——不需要改变

 */

var app = angular.module('sysCodeConfigModule',[]);

var sysCodeCon={},sysCode;

/**

 * 2：配置自己的代码部分，需要自己配置对应的内容以及存入对应的变量中，常量仅用于翻译信息，请勿改变，另外，命名采用全部大写多个单词使用下划线分割的形式，请自行注释一下

 */

//性别类型

sysCode =[];

sysCode=[{"id_":1,"name_":"男"},{"id_":2,"name_":"女"},{"id_":3,"name_":"保密"}];

sysCodeCon.SEX_TYPE = sysCode;

/*操作类型，添加新的系统代码也是非常简单的哟！

sysCode =[];

sysCode=[{"id_":"A","name_":"添加"},{"id_":"D","name_":"删除"},{"id_":"U","name_":"修改"}];

sysCodeCon.OPERATION_TYPE = sysCode;

*/

/**

 * 3：将配置的常量配置为模块的常量，以便在对应的模块中使用——不需改变

 */

app.constant('SYS_CODE_CON',sysCodeCon);

3：SysCodeTranslate.js文件，翻译系统代码的模块，这个文件不需要任何的改动，其作用非常简单——根据代码类型和代码，将代码翻译成文字用于页面展现

/**

 * 1：根据系统代码的ID和类型将对应的代码翻译为对应的名称，用于在页面详情以及列表中使用——不需要改变

 */

var app=angular.module("sysCodeTranslateModule", ['sysCodeConfigModule']);

app.factory('sysCodeTranslateFactory',function(SYS_CODE_CON) {

    return{

        //系统代码翻译

        codeTranslate:function(code,type)

        {

            if(type)

            {

                var sysCodeCon=SYS_CODE_CON,typeList=sysCodeCon[type],i=0;

                if(typeList)

                {

                    for(;i<typeList.length;i++)

                    {

                        if(code==typeList[i].id_){return typeList[i].name_ }

                    }

                }

            }

            return code;

        }

    };

}); 

4：demo.html文件，这里就是一个简单的演示，具体到实际的项目一定比这复杂的多，但是对于我们要描述的代码展现和翻译是怎么回事，还是足够的

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <!-- 引入angularJS框架文件 -->

        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <!-- 引入系统代码配置文件 -->

        <script type="text/javascript" src="SysCodeConfig.js"></script>

        <!-- 引入系统代码翻译文件 -->

        <script type="text/javascript" src="SysCodeTranslate.js"></script>

        <script type="text/javascript">

            //声明demo的模块及其依赖的模块

            var app = angular.module('demoModule', ['sysCodeConfigModule' , 'sysCodeTranslateModule']);

            //在demo模块中创建一个控制器，并且引入其依赖的模块中服务

            app.controller('demoController', function($scope , SYS_CODE_CON , sysCodeTranslateFactory) {

                //将系统代码配置、翻译相关的服务挂在当前的作用域变量上

                $scope.sysCode={'con':SYS_CODE_CON,'translate':sysCodeTranslateFactory};

                //打印系统代码先关的对象

                console.info("$scope.sysCode is ======",$scope.sysCode);

                //声明用户对象，用于双向数据绑定、系统代码翻译的演示

                $scope.user={};

            });

        </script>

    </head>

    <body bgcolor="AliceBlue" ng-app="demoModule" ng-controller="demoController" align="center">

          <!-- 使用配置的系统代码，多用在添加、修改的页面 -->

          <select ng-options="s.id_ as s.name_ for s in sysCode.con.SEX_TYPE" ng-model="user.sex">

              <option value="">请选择</option>

          </select>

          <!-- 翻译配置的系统代码，多用在列表查询、详情查询页面 -->

          <p ng-bind="sysCode.translate.codeTranslate(user.sex,'SEX_TYPE')"></p>

    </body>

</html>

5：为了更容易理解我们的例子，下面我截取了几张代码演示的图例

5-1：首次进入页面的图例，使用了AngularJS的”ng-options“指令

5-2：展示系统代码的配置集合

5-3：利用AngularJS的数据双向绑定，展示了一下系统代码翻译的功能

6：小结

示例代码比较简单，不过在Web开发中常常会使用的到，所以，这里小记一笔以备后用。

当然，这里仅仅针对系统代码的控制提供了一种思路，这种思路是我认为是可行的，针对系统代码的处理有如下一些情况，如果是可变的应该提供相应的维护页面，存储在数据库中，如果是不可变的也可以存储在数据库中（需要初始化基础数据）、不过存储在服务器的某个文件中对用户不可见也行，如果对于用户可见（习惯按F12的用户）也没关系，那么存储在前端的JS文件中也是可以的。

为什么这样存储哪？直接存储汉字不也行吗？

直接存储汉字也是可以的，不过没有存储数字或者代码好，存储数字或者代码相对于存储汉字有如下的几点好处：

1：节省存储空间

2：能提高数据库查询的效率

3：使编程更简单，不然汉字多了，会多写许多的代码，汉字如果需要变换，使用汉字的维护成本就高了去啦（可能前端、后端、数据库视图中都需要做出更改）！

AngularJS-系统代码的配置和翻译的更多相关文章

  1. AngularJS PhoneCat代码分析

    转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...

  2. 基于DRL和TORCS的自动驾驶仿真系统——之环境配置

    基于DRL和TORCS的自动驾驶仿真系统 --之环境配置 玩TORCS和DRL差不多有一整年了,开始的摸爬滚打都是不断碰壁过来的,近来在参与CMU的DRL10703课程学习和翻译志愿者工作,也将自己以 ...

  3. Windows系统通用安全配置基线

    一:共享账号检查 配置名称:账号分配检查,避免共享账号存在 配置要求: 1.系统需按照实际用户分配账号: 2.根据系统的使用需求,设定不同的账户和账户组,包括管理员用户,数据库用户,审计用户,来宾用户 ...

  4. Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间

    Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间 一丶URLconf配置 ...

  5. 2021年-在windwos下如何用TOMACT发布一个系统（完整配置案列）

    2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...

  6. Oracle 11g客户端在Linux系统上的配置步骤详解

    Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...

  7. Linux系统网络基本配置

    1. ifconfig命令的使用: (1)查看所有网卡基本信息:ifconfig (2)查看特定网卡信息:ifconfig (网卡名,如:eht0) (3)停止网卡设备服务:ifconfig (网卡名 ...

  8. 在Ubuntu 12.04系统中安装配置OpenCV 2.4.3的方法

    在Ubuntu 12.04系统中安装配置OpenCV 2.4.3的方法   对于,在Linux系统下做图像识别,不像在windows下面我们可以利用Matlab中的图像工具箱来实现,我们必须借助Ope ...

  9. Entity Framework入门教程（18)---EF6中基于代码进行配置方式

    EF6中基于代码进行配置方式 我们以前对EF进行配置时是在app.config/web.config下的<entityframework>节点下进行配置的,EF6引进了基于代码的配置方法. ...

随机推荐

  1. ie浏览器 jsp中链接参数为中文的处理

    在js中,使用 encodeURIComponent(encodeURIComponent("警情抽查"))来处理参数,例如: mini.get("khxmdm" ...

  2. pyspider 简单应用之快速问医生药品抓取（一）

    网址:http://yp.120ask.com/search/-0-0--0-0-0-0.html from pyspider.libs.base_handler import * class Han ...

  3. VC++常用函数

    // 获取文件运行路径 void GetAppFilePath(const CString& strProjectName) { TCHAR szFileName[MAX_PATH]; HMO ...

  4. Membership基本用法

    MemberShip简介: Membership是Asp.Net框架,用于管理网站的用户Membership,角色Roles以及配置信息Profile. System.Web.Security.Mem ...

  5. CSS盒子模型的一些理解

    盒子模型相当于把现实中的盒子形象化. 盒子模型的大小="内容(content)+内填充(padding)+边框(border)+外边距(margin)" 盒子模型方向为:top, ...

  6. OpenGL顶点数组

    概述 作为在立即模式(glBegin()与glEnd()之间)下指定单个顶点数据的替代,你可以保存顶点数据在一组列表中,包括顶点位置.法线.纹理坐标与颜色信息.并且你可以通过索引数组解引用数组元素绘制 ...

  7. 创建支持ssh服务的docker容器和镜像

    http://www.kongxx.info/blog/?p=57 1. 这里使用的centos作为容器,所以首先下载centos的imagessudo docker pull centos 2. 下 ...

  8. 怎么使用CDR中排列对象功能

    通过将对象发送到其他对象的前面或者后面,可以更改图层或页面上对象的堆叠顺序,还可以将对象按堆叠顺序精确定位,并且可以反转多个对象的堆叠顺序.本教程将详解CorelDRAW中排列对象各按钮功能. 1. ...

  9. 简述cookie

    1.Cookie的概述 * Cookie是客户端的技术(默认把Cookie保存在每个用户的浏览器上) * 程序把每个用户的数据以cookie的形式写给用户各自的浏览器 * 当用户使用浏览器再去访问服务 ...

  10. 自己动手制作CSharp编译器

    在你喜欢的位置(如F盘根目录)新建一个文件夹,并命名为“CSharp开发环境”.找到或下载C#编译器组件(csc.exe和cscui.exe),并放在先前建立的文件夹中.该组件的一般位置在C盘的.NE ...