前言：在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. MySQL查询缓存

    MySQL查询缓存 用于保存MySQL查询语句返回的完整结果,被命中时,MySQL会立即返回结果,省去解析.优化和执行等阶段. 如何检查缓存? MySQL保存结果于缓存中: 把SELECT语句本身做h ...

  2. web服务器软件集成包问题

    今天下了wampserver,运行错误缺少dll,然后下载apprev也是,最后下了个wampserver 32位了终于没问题了.

  3. centos x86_64环境下 下载chrome

    由于Cent OS内核版本过低,无法安装Chrome浏览器2.替代方案:可以使用Chromium浏览器 1.切换到root: su - 或者 sudo -i 2.下载新的软件源定义: cd /etc/ ...

  4. EL表达式有无双引号的区别

    最近做项目时发现原来对EL表达式理解太浅,通过一个springMVC项目,加深了对其的理解,下面总结一下,如发现有不对之处,请批评指正: 1.在单独的js文件中,EL表达式无效,如:var type= ...

  5. [转]DB2 load参数

    本文持续更新,LOAD如何提高parallelism.LOAD SHRLEVEL CHANGE的性能提高. =========================== Every once in a wh ...

  6. CMAKE 配置选项

    CMake Configuration Options 注: 本文翻译自 dcmtk_wiki: Howto_CMakeConfiguration. DCMTK版本(原文):dcmtk-3.6.0 C ...

  7. ILGenerator.Emit动态 MSIL编程(三)之动态代理

    using System; using System.Linq; using System.Reflection; using System.Reflection.Emit; public seale ...

  8. linux 维护常见场景小命令 （未完待续）

    1.安装KDE桌面 [root@rhel06 ~]# yum -y groupinstall "X Windows System" "KDE Desktop" ...

  9. 【python】python定时器

    #coding:utf-8 import os import time def print_ts(message): print "[%s] %s"%(time.strftime( ...

  10. IOS开发-UIScrollView陷阱之----删除所有子view, 滚动条(indicator) 消失

    使用UIScrollView经常会执行清空视图的操作,我们普遍的做法是: for (UIView *subview in self.scrollView.subviews) { [subview re ...