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

最新推荐文章于 2022-09-21 00:21:47 发布

羽轩GM

最新推荐文章于 2022-09-21 00:21:47 发布

阅读量2.4k

点赞数

文章标签： angular 遍历

本文链接：https://blog.csdn.net/musuny/article/details/43054239

版权

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>