AngularJS 表格ng-repeat 指令可以完美的显示表格。在表格中显示数据使用 angular 显示表格是非常简单的：AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"> <table><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr> ...
AngularJS SQL在前面章节中的代码也可以用于读取数据库中的数据。使用 PHP 从 MySQL 中获取数据AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px; } table tr:nth-child(odd) {background-color: #f1f1f1; } table tr:nth-chil...
AngularJS XMLHttpRequest$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。读取 JSON 文件以下是存储在web服务器上的 JSON 文件：http://www.runoob.com/try/angularjs/data/Customers_JSON.php { "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbkp", "City" : "Lule", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezu...
AngularJS HTML DOMAngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。ng-disabled 指令ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">点我!<...
AngularJS 表单AngularJS 表单是输入控件的集合。HTML 控件以下 HTML input 元素被称为 HTML 控件:input 元素 select 元素 button 元素 textarea 元素HTML 表单HTML 表单通常与 HTML 控件同时存在。AngularJS 表单实例 First Name:Last Name: RESET form = {"firstName":"John","lastName":"Doe"} master = {"firstName":"John","lastName":"Doe"} 应用程序代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script ...
前言 AngularJS 提供了动画效果，可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js 库。 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>还需在应用中使用模型 ngAnimate： <body ng-app="ngAnimate">1、什么是动画？ 动画是通过改变 HTML 元素产生的动态变化效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div {transition: all line...
AngularJS Scope(作用域)Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。如何使用 Scope当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:AngularJS 实例控制器中的属性对应了视图上的属性： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6...
AngularJS 服务(Service)AngularJS 中你可以创建自己的服务，或使用内建服务。什么是服务？在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。有个 $location 服务，它可以返回当前页面的 URL 地址。实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-a...
循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。 用AngularJS就爽多了，语法和JSP类似： <!doctype html> <html ng-app> <head><meta charset="utf-8"><title>ng-repeat directive</title> </head> <body> <table ng-controller="CartContr...
表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式，并输出它们被使用的数据在那里。 AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串、数字、运算符和变量 数字运算{{1 + 5}}字符串连接{{ abc + bcd }}变量运算 {{ firstName + " " + lastName }}， {{ quantity * cost }}对象{{ person.lastName }}数组...
相关阅读： AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到，AngularJS模型（ng-model）可以将HTML输入域中的值与AngularJS创建的变量绑定。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="name=Jone Snow"> 名字: <input ng-mode...
AngularJs是一个不错的用于开发SPA应用（单页Web应用）的框架。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，由JavaScript来控制不同view在这个页面上的呈现。本文源于Youtube上一个不错的AngularJs的入门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filt...
AngularJS 通过新的属性和表达式扩展了 HTML。Angularjs学习起来也非常的简单。 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。这里AngularJS就应运而生，...
怎么样快速了解AngularJS？ 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引。 其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解Ang...
angular 所有用到的库, 全部用的CDN：代码如下: <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/jav...