ng-repeat指令非常适合用来显示表格。
在表格中显示数据
在AngularJS中显示表格非常容易:
<div ng-app="myApp" ng-controller="customersCtrl"> table> tr ng-repeat="x in names"> td>{{ x.Name }}</>{{ x.Country }}tr> divscript> var app = angular.module('myApp,[]); app.controller(customersCtrlfunction ($scope) { $scope.names [{ "Name: Alfreds FutterkisteCityBerlinCountryGermany },{ Ana Trujillo Emparedados y heladosMéxico D.F.MexicoAntonio Moreno TaqueríaAround the HornLondonUKB's BeveragesBerglunds snabbköpLuleåSwedenBlauer See DelikatessenMannheimBlondel père et filsStrasbourgFranceBólido Comidas preparadasMadridSpainBon app'MarseilleBottom-Dollar MarketseTsawassenCanadaCactus Comidas para llevarBuenos AiresArgentinaCentro comercial MoctezumaChop-suey ChineseBernSwitzerlandComércio mineiroSão PauloBrazil }]; }); >
运行
加上样式
为了使上面的表格更好看,我们在页面上加上一些CSS:
<style> table,th,td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { #ffffff; } </style>
AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会就会被绕晕了,最起码英文文档中的代码与中文文档中的代码是一致的,但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。 其中用到的软件: Chart.js框架,版本1.0.2,一
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示: 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
AngularJS进阶(三)HTML:让表单、文本框只读,不可编辑的方法
HTML:让表单、文本框只读,不可编辑的方法有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使中国">的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中,移动端新近增加了一个功能“微信授权登录”,由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉。 首先,熟悉一下微信授权部分的源代码,如下所示: