AngularJS案例 · 前端开发

AngularJS选择按钮之数组案例： ~~~ <!DOCTYPE html> <html ng-app="form" ng-controller="FormCont"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>我最喜愛的恆生指數成分股投票活動</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/style.css">  </head> <body> <select class="form-control" ng-model="form.IndexList" ng-options="obj.text as obj.value for obj in form.IndexListArray"> <option value="">請選擇股票</option> </select> <br/> <input type="text" readonly="readonly" class="form-control" onblur="ClearErrorMsg($(this))" value="{{form.IndexList}}"> <script src="./js/jquery-2.1.4.min.js"></script> <script src="./js/bootstrap.min.js"></script> <script src="./js/angular-1.4.6.min.js"></script>  <script> var app = angular.module("form",[]); app.controller("FormCont",function($scope){ $scope.form = {}; $scope.form.IndexListArray = [ {text:"00001 長江實業" , value: "00001 長江實業" }, {text:"00002 中電控股" , value: "00002 中電控股" }, {text:"00003 香港中華煤氣" , value: "00003 香港中華煤氣" }, {text:"00004 九龍倉集團" , value: "00004 九龍倉集團" }, {text:"00005 匯豐控股" , value: "00005 匯豐控股" }, {text:"00006 電能實業" , value: "00006 電能實業" }, {text:"00011 恆生銀行" , value: "00011 恆生銀行" }, {text:"00012 恆基地產" , value: "00012 恆基地產" }, {text:"00016 新鴻基地產" , value: "00016 新鴻基地產" }, {text:"00017 新世界發展" , value: "00017 新世界發展" }, {text:"00019 太古股份公司Ａ" , value: "00019 太古股份公司Ａ" }, {text:"00023 東亞銀行" , value: "00023 東亞銀行" }, {text:"00027 銀河娛樂" , value: "00027 銀河娛樂" }, {text:"00066 港鐵公司" , value: "00066 港鐵公司" }, {text:"00083 信和置業" , value: "00083 信和置業" }, {text:"00101 恆隆地產" , value: "00101 恆隆地產" }, {text:"00135 昆侖能源" , value: "00135 昆侖能源" }, {text:"00144 招商局港口" , value: "00144 招商局港口" }, {text:"00151 中國旺旺" , value: "00151 中國旺旺" }, {text:"00175 吉利汽車" , value: "00175 吉利汽車" }, {text:"00267 中信股份" , value: "00267 中信股份" }, {text:"00288 萬洲國際" , value: "00288 萬洲國際" }, {text:"00293 國泰航空" , value: "00293 國泰航空" }, {text:"00386 中國石油化工股份" ,value: "00386 中國石油化工股份" }, {text:"00388 香港交易所" , value: "00388 香港交易所" }, {text:"00688 中國海外發展" , value: "00688 中國海外發展" }, {text:"00700 騰訊控股" , value: "00700 騰訊控股" }, {text:"00762 中國聯通" , value: "00762 中國聯通" }, {text:"00823 領展房產基金" , value: "00823 領展房產基金" }, {text:"00836 華潤電力" , value: "00836 華潤電力" }, {text:"00857 中國石油股份" , value: "00857 中國石油股份" }, {text:"00883 中國海洋石油" , value: "00883 中國海洋石油" }, {text:"00939 建設銀行" , value: "00939 建設銀行" }, {text:"00941 中國移動" , value: "00941 中國移動" }, {text:"00992 聯想集團" , value: "00992 聯想集團" }, {text:"01038 長江基建集團" , value: "01038 長江基建集團" }, {text:"01044 恆安國際" , value: "01044 恆安國際" }, {text:"01088 中國神華" , value: "01088 中國神華" }, {text:"01109 華潤置地" , value: "01109 華潤置地" }, {text:"01113 長實地產" , value: "01113 長實地產" }, {text:"01299 友邦保險" , value: "01299 友邦保險" }, {text:"01398 工商銀行" , value: "01398 工商銀行" }, {text:"01928 金沙中國有限公司" ,value: "01928 金沙中國有限公司" }, {text:"02018 瑞聲科技" , value: "02018 瑞聲科技" }, {text:"02318 中國平安" , value: "02318 中國平安" }, {text:"02319 蒙牛乳業" , value: "02319 蒙牛乳業" }, {text:"02388 中銀香港" , value: "02388 中銀香港" }, {text:"02628 中國人壽" , value: "02628 中國人壽" }, {text:"03328 交通銀行" , value: "03328 交通銀行" }, {text:"03988 中國銀行" , value: "03988 中國銀行" } ]; // Question 2. Convert the 2D JS array in question 1 into JSON format console.log(angular.toJson($scope.form.IndexListArray)); }); </script> </body> </html> ~~~ 效果图如下： ![](https://box.kancloud.cn/d5ed5402cd54126838ff96c231d9ab57_1232x530.png)