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

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 [email protected] 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.测试效果

时间: 2024-08-28 16:21:28

HTML使用Angular JS加载银行信息遍历成Radio的相关文章

如何解决Rally模板提示angular js加载错误

[前言] Rally是一个开源测试工具,用于测试openstack各个组件的性能 在使用Rally测试完毕后,一般会生成测试报告,这点很重要.但是原生态的Rally报告模板angular js框架是从Google下载的. <%block name="libs"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d

js加载xml文件xin

js加载xml文件 作为刚进入软件开发大军的我,以一个水军的资格开始做梦,以一个画者的资格在'一张白纸'上开始涂抹.工作在哪里??工作在哪里呢??? 今天发现一道面试题: 附件中有一个城市列表的city.xml文件,现在需要您通过Javascript脚本对该文件进行解析,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息(界面布局请参考test1.html文件,也可以自行定义). 上网查了一天的资料,绞尽脑汁的试着网上前辈的各种方法,为什么一个个别人成功的案例,

angular懒加载的一些坑

写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

【随笔】js加载

有时候,当发现js操作一个dom的时候,发现dom没有找到,这是由于html没有加载完就开始操作该dom的缘故,所以需要在html文档加载完后再加载js,于是我们可以这么做: js方法:window.onload 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行.这种情况对编写功能性代码非常有利,因为无需考虑加载的次序. window.onload=function(){ alert

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

C# 动态加载程序集信息

在设计模式的策略模式中,需要动态加载程序集信息,本文通过一个简单的实例,来讲解动态加载Dll需要的知识点. 涉及知识点: AssemblyName类,完整描述程序集的唯一标识, 用来表述一个程序集. Assembly类,在System.Reflection命名空间下,表示一个程序集,它是一个可重用.无版本冲突并且可自我描述的公共语言运行时应用程序构建基块. Module类 表述在模块上执行反射,表述一个程序集的模块信息. Type类,在System命名空间下,表示类型声明:类类型.接口类型.数组

js便签笔记(8)——js加载XML字符串或文件

1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "data.xml", false); xhr.send(null); var xmlDoc = xhr.responseXML; console.log(xmlDoc

Unity 5.x动态加载光照信息(所有坑已踩)

能搜到这的应该是被新的烘焙系统坑了少时间,4.x到5.x美术必须重新烘焙,关于美术的没什么说的,只有---重新烘焙! 新的烘焙系统,为了兼容5.x的多场景编辑功能,将烘焙信息从mesh全部挪到了一个中间件xxx.assets,这个资源文件在5.x烘焙完成后和光照贴图存放在一起,然而关于这个资源文件,我是查来查去没有找到任何接口可以访问. 只能百度谷歌,发现方案基本都是序列化,因为上面提到的烘焙信息没有在mesh中保存,而是一个鸡肋资源文件,发布时xxx.assets可以删了. 序列化哪些数据,在