zoukankan      html  css  js  c++  java
  • 重构与动态为angularjs栏位赋值或获取值

    先来看下面一段html:

    这个ng-model名称带有一定的规律带有序号。

     
    先来实现数据绑定,从数据取到数据后,为ng-model绑定相对应的值:

    var c = response.data
    
                        $scope.Start1 = $filter("jsonDateFormat")(c.Start1, "yyyy-MM-dd");
                        $scope.Start2 = $filter("jsonDateFormat")(c.Start2, "yyyy-MM-dd");
                        $scope.Start3 = $filter("jsonDateFormat")(c.Start3, "yyyy-MM-dd");
                        $scope.Start4 = $filter("jsonDateFormat")(c.Start4, "yyyy-MM-dd");
                        $scope.Start5 = $filter("jsonDateFormat")(c.Start5, "yyyy-MM-dd");
                        $scope.Start6 = $filter("jsonDateFormat")(c.Start6, "yyyy-MM-dd");
                        $scope.Start7 = $filter("jsonDateFormat")(c.Start7, "yyyy-MM-dd");
                        $scope.Start8 = $filter("jsonDateFormat")(c.Start8, "yyyy-MM-dd");
                        $scope.Start9 = $filter("jsonDateFormat")(c.Start9, "yyyy-MM-dd");
                        $scope.Start10 = $filter("jsonDateFormat")(c.Start10, "yyyy-MM-dd");
                        $scope.Start11 = $filter("jsonDateFormat")(c.Start11, "yyyy-MM-dd");
                        $scope.Start12 = $filter("jsonDateFormat")(c.Start12, "yyyy-MM-dd");
                        $scope.Start13 = $filter("jsonDateFormat")(c.Start13, "yyyy-MM-dd");
                        $scope.End1 = $filter("jsonDateFormat")(c.End1, "yyyy-MM-dd");
                        $scope.End2 = $filter("jsonDateFormat")(c.End2, "yyyy-MM-dd");
                        $scope.End3 = $filter("jsonDateFormat")(c.End3, "yyyy-MM-dd");
                        $scope.End4 = $filter("jsonDateFormat")(c.End4, "yyyy-MM-dd");
                        $scope.End5 = $filter("jsonDateFormat")(c.End5, "yyyy-MM-dd");
                        $scope.End6 = $filter("jsonDateFormat")(c.End6, "yyyy-MM-dd");
                        $scope.End7 = $filter("jsonDateFormat")(c.End7, "yyyy-MM-dd");
                        $scope.End8 = $filter("jsonDateFormat")(c.End8, "yyyy-MM-dd");
                        $scope.End9 = $filter("jsonDateFormat")(c.End9, "yyyy-MM-dd");
                        $scope.End10 = $filter("jsonDateFormat")(c.End10, "yyyy-MM-dd");
                        $scope.End11 = $filter("jsonDateFormat")(c.End11, "yyyy-MM-dd");
                        $scope.End12 = $filter("jsonDateFormat")(c.End12, "yyyy-MM-dd");
                        $scope.End13 = $filter("jsonDateFormat")(c.End13, "yyyy-MM-dd");  
    Source Code

    以上方法,最原始了,一一绑定。有没有一个简单一点的,只实现名称序号循环。

    var c = response.data
    
                        var objs = [
                            { S: c.Start1, E: c.End1 },
                            { S: c.Start2, E: c.End2 },
                            { S: c.Start3, E: c.End3 },
                            { S: c.Start4, E: c.End4 },
                            { S: c.Start5, E: c.End5 },
                            { S: c.Start6, E: c.End6 },
                            { S: c.Start7, E: c.End7 },
                            { S: c.Start8, E: c.End8 },
                            { S: c.Start9, E: c.End9 },
                            { S: c.Start10, E: c.End10 },
                            { S: c.Start11, E: c.End11 },
                            { S: c.Start12, E: c.End12 },
                            { S: c.Start13, E: c.End13 }
                        ];                                       
    
                        var i = 1;
                        while (i <= 13) {
                            $scope['Start' + i] = $filter("jsonDateFormat")(objs[i - 1].S, "yyyy-MM-dd");
                            $scope['End' + i] = $filter("jsonDateFormat")(objs[i - 1].E, "yyyy-MM-dd");
    
                            i++;
                        }
    Source Code

    这样一改,简洁多了。不过还得把获取的数据源进行一次转换为阵列。

    下面第3次修改:

     var i = 1;
                        while (i <= 13) {
                            $scope['Start' + i] = $filter("jsonDateFormat")(c['Start' + i], "yyyy-MM-dd");
                            $scope['End' + i] = $filter("jsonDateFormat")(c['End' + i], "yyyy-MM-dd");
    
                            i++;
                        }
    Source Code

    OK,讲完绑定,现在我们来说说获取ng-model的值:

    object.Start1 = $scope.Start1;
                object.Start2 = $scope.Start2;
                object.Start3 = $scope.Start3;
                object.Start4 = $scope.Start4;
                object.Start5 = $scope.Start5;
                object.Start6 = $scope.Start6;
                object.Start7 = $scope.Start7;
                object.Start8 = $scope.Start8;
                object.Start9 = $scope.Start9;
                object.Start10 = $scope.Start10;
                object.Start11 = $scope.Start11;
                object.Start12 = $scope.Start12;
                object.Start13 = $scope.Start13;
                object.End1 = $scope.End1;
                object.End2 = $scope.End2;
                object.End3 = $scope.End3;
                object.End4 = $scope.End4;
                object.End5 = $scope.End5;
                object.End6 = $scope.End6;
                object.End7 = $scope.End7;
                object.End8 = $scope.End8;
                object.End9 = $scope.End9;
                object.End10 = $scope.End10;
                object.End11 = $scope.End11;
                object.End12 = $scope.End12;
                object.End13 = $scope.End13;  
    Source Code

    以上,也是最原始的获取方法,一个一个进行获取。

    从上面的绑定方法与原理,我们对获取ng-model有值,也可以使用循环的方法来进行。

     var i = 1;
                while (i <= 13) {
                    object['Start' + i] = $scope['Start' + i];
                    object['End' + i] = $scope['End' + i];
                    i++;
                }
    Source Code
  • 相关阅读:
    使用GoogleCode作SVN服务器的一些问题及解决办法
    【转】hibernate中的映射文件xxx.hbm.xml详解总结
    Connection cannot be null when 'hibernate.dialect' not set
    <mvc:view-controller path=""/>标签的作用
    mysql 5.7.18版本 sql_mode 问题
    搭建Spring所需的各类jar包汇总详解
    WEB-INF目录与META-INF目录的作用
    【转】NPIV
    Java中继承thread类与实现Runnable接口的区别
    centos6.5 配置本地yum源
  • 原文地址:https://www.cnblogs.com/insus/p/12201278.html
Copyright © 2011-2022 走看看