【Angular】ng-repeat遍歷輸出陣列
阿新 • • 發佈:2019-01-31
今天剛好做選擇題選項的顯示,拿到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
作用域中;