您的位置：首页 > Web前端 > JavaScript

HTML使用Angular JS加载银行信息遍历成Radio

2015-01-23 13:07 260 查看

1.工程结构





2.bankInfo.json

[
  {
    "code": "BOC",
    "name": "中国银行"
  },
  {
    "code": "ICBC",
    "name": "中国工商银行"
  },
  {
    "code": "CCB",
    "name": "中国建设银行"
  },
  {
    "code": "ABC",
    "name": "中国农业银行"
  },
  {
    "code": "CMBC",
    "name": "中国民生银行"
  },
  {
    "code": "CMB",
    "name": "招商银行"
  },
  {
    "code": "CIB",
    "name": "兴业银行"
  },
  {
    "code": "BCM",
    "name": "交通银行"
  },
  {
    "code": "CEB",
    "name": "中国光大银行"
  },
  {
    "code": "GDB",
    "name": "广东发展银行"
  }
]

3.app.js

/**
 * Created by 1250052380@qq.com on 2015/1/23.
 */
angular.module("bank",[])
    .controller("bankController",function($scope,$http){
        $http.get("../data/bankInfo.json")
            .then(function(response){
                $scope.banks=response.data;
            })

    })


4.index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.min.js"></script>
    <script src="../js/app.js"></script>
</head>
<body>
<div ng-app="bank" ng-controller="bankController">
    <div ng-repeat="bank in banks">
    <input type="radio" name="bank" value="{{bank.code}}"/>{{bank.code}}-{{bank.name}}
</div>
</body>
</html>


5.测试效果





附件代码下载地址：http://download.csdn.net/detail/musuny/8389723
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航