【Angular】ng-repeat遍历输出数组

今天刚好做选择题选项的显示，拿到String类型的4个选项的集合，用分号分隔，然后做切割（split()）；

A.相对，绝对;B.理论，实际;C.效率，比功;D.简单，联合;

先展示成功案例，然后再说之前报错的地方；

1、js代码：

function () {
                var optionalStr=$scope.question.optional;
                $scope.opts = optionalStr.split(";");
            }

2、html页面代码：

 <!--选项-->
<div class="col-sm-10" ng-if="question.questiontype=='单选题'||question.questiontype=='选择题'||question.questiontype=='多选题'">
    <h4 ng-repeat="item in opts">
        <input type="radio" name="radioIcon">{{item}};<br>
    </h4>
</div>

3、效果展示：

这个是错误的展示：

首先，如果用注释的代码，封装成对象，把opts写死，一个一个给赋值id，从0到3，页面可以显示一样的内容，但是，如果遇到选项不是4个的选项，那么很明显，就会报错；但是如果使用了for循环遍历，页面显示不出来；

其次，修改了错误展示中的代码，把局部变量opt不放入$scope中，因为这样容易弄混，而且也多次一举：

var optionalStr = $scope.question.optional;
opt=optionalStr.split(";");//根据分号去切割“A.相对，绝对;B.理论，实际;C.效率，比功;D.简单，联合;”这个字符串；
//$scope.opts=[]无论加不加这个，也是不能够实现；
//遍历输出，存入新对象数组内：
for(var i=0;i<opt.length();i++){
    $scope.opts.push({
    id:i,
    value:$scope.opt[i]
})
}

这里push不进去，浏览器页面不能显示，也是很困惑；

这里总结的教训：
①删繁就简，不该要的就不要，不要把问题搞复杂了；声明的对象越少越好；
②input元素，type=”radio”属性表示圆形唯一选中框；如果存在同类的几个按钮，只允许选中一个；radio是收音机的意思，老式收音机 按下一个按钮，其它的按钮都会弹上来，所以radio很形象；
③$scope是Angular的作用域，可以跨页面传参，$scope.opt表示把opt变量放到$scope作用域中；