关于AngularJS中ng-repeat问题（问卷遍历问题）

由于公司业务的要求，鄙人被要求做一个手机端调查问卷的功能，关键是问卷是不断更新的，本公司考虑问卷的问题即为常规型3种题型即单选题，多选题和填空题。鄙人在做的过程时真的是遇到很多问题，差点就以为此条路不能通呢，差一点点就要放弃，BUT，你懂得，工作就是工作，让你做的事情你怎么可能say no呢！

OK，我们废话少说直接进入正题：我在做的时候主要用的是AngularJS的ng-repeat来遍历问卷中的全部问题，于是各种各样的问题接踵而至。首先是单选问题，单选问题用的是radio，它的特性很明确就是同一名字只能选择一个，于是开始的遍历时赋予静态的名称显然是行不通的，于是只能动态赋予名字：

 <label style="font-size: 14px;"><input name="{{item.SS_ID}}" type="radio" value="{{option.SO_ID}}"/>{{option.SO_CONTENT }} </label>

其中SS_ID为问题的ID；

多选问题就是<label style="font-size: 14px;">
                                <input type="checkbox" name="checkbox" checked="" value="{{option.SO_ID}}">
                                {{option.SO_CONTENT }}
                            </label>

填空题就是：<label><input type="text" name="text" id="{{item.SS_ID}}"> </label>

但是其中一个难题是我们如何让页面自动判断该题的题型呢？所以就要用到angularJS的另一个特性就是：ng-switch-when='3'，后面的数字就是对应的题型，其实说到底就像是Java里面的case，就是满足哪个条件进哪一个。

让我们看一下路上真面目即前端页面是怎么组织的：

<form>
        <ion-list style="padding-top: 10px;">
            <!--<div class="col col-15"></div>-->
            <!--<div class="col col-80">-->
            <ion-item ng-repeat="item in items"
                      class="item-remove-animate" ng-switch='item.SS_TYPE'
                      ng-click="write(item)">
                <div style="font-size: 16px;">
                    <div class="row">
                        <div class="col col-10" ng-bind="$index+1">1</div>
                        <div class="col col-90">
                            {{item.SS_TITLE}}
                        </div>
                    </div>
                    <ion-item ng-repeat="option in item.option"
                              class="item-remove-animate" style="font-size: 14px;">
                        <div ng-switch-when='1' name="radio0">


                            <label style="font-size: 14px;"><input name="{{item.SS_ID}}" type="radio"
                                                                   value="{{option.SO_ID}}"/>{{option.SO_CONTENT
                                }} </label>
                        </div>
                        <div ng-switch-when='2'>
                            <label style="font-size: 14px;">
                                <input type="checkbox" name="checkbox" checked="" value="{{option.SO_ID}}">
                                {{option.SO_CONTENT }}
                            </label>
                        </div>
                        <div ng-switch-when='3' style="font-size: 14px;">
                            <label><input type="text" name="text" id="{{item.SS_ID}}"> </label>
                        </div>
                    </ion-item>
                </div>
            </ion-item>
            <!--</div>-->
        </ion-list>
    </form>

ok。看完页面重头戏来了。就是js该如何组织；首先思路肯定是获取用户做出的答案，但是由于体型不同，所以获取的方式也就不同；

option_val = [];
        var count = 0;
        $scope.submitText = function () {
            var type = document.getElementsByTagName("input");
            var oname = "";
            // alert(type[0].getAttribute("type"));
            for (var i = 0; i < type.length; i++) {
                if (type[i].getAttribute("type") == "radio") {
                    count++;
                    var name = type[i].getAttribute("name");
                    if (oname != name) {
                        oname = name;
                        //alert(name);


                        var text = document.getElementsByName(name);
                        for (var j = 0; j < text.length; j++) {
                            if (text[j].checked == true) {
                                option_val.push(text[j].value);
                            }
                        }
                    }
                }
            }
            obj = document.getElementsByName("checkbox");
            check_val = [];
            for (k in obj) {
                if (obj[k].checked)
                    check_val.push(obj[k].value);
            }
            //alert(check_val);
            // }else{
            var total_val = [];
            total_val = option_val + "," + check_val;
            var total_length = total_val.length;
            total_val = total_val.substring(1, total_length);
            var text_val = "";
            var text = "";
            var text_id = "";
            var id_temp = "";
            var json = {};
            text = document.getElementsByName("text");
            for (var k = 0; k < text.length; k++) {
                var id = text[k].getAttribute("id");
                if (id != id_temp) {
                    id_temp = id;
                    var text_temp = text[k].value;
                    //alert(text_temp);
                    text_val = text_val + "{" + "\"" + id_temp + "\"" + ":" + "\"" + text_temp + "\"" + "}" + ",";
                }
            }
            var lebgth_text = text_val.length;
            text_val = text_val.substring(0, lebgth_text - 1);
            text_val = "[" + text_val + "]";

ok，上面的思路就是先把单选答案存入text[j].value，多选的答案放入obj[k].value，填空的答案放入text_val ，尤为重要的是填空，要把答案和题号封装成JSON数组的格式传给后，关于JSON数组的拼写我几乎拼了一下，简直想骂人。。。

Whatever。最后还是得到了想要的效果，也就不骂人了。之前我在搜别人的经验时并没有搜到相关的问题，要么就是鄙人走索能力差要么就是真的没人解答，所以在此记录一下，希望能对大家有帮助，如果你遇到同样的问题可以给我留言，大家一起讨论下解决方案，还有最后就是我感觉尽管最后我得到了想要的效果，但是效率可能不是最高的，哪位大神有更高效率的解决方法我们可以讨论一下。在此拜过。。。。