First AngularJS !
My first angular!
<html ng-app>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="controllers.js"></script>
<style>
.selected {
background-color: lightgreen;
}
</style>
</head> <body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text' />
<p>{{greeting.text}}, World</p>
</div>
<div ng-controller="CartController">
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
</div>
<form ng-controller="fundingController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{needed}}
<input ng-model="funding.me">
</form>
ng-change ng-submit 就像事件处理函数一样
<form ng-submit="requestFunding()" ng-controller="StartUpController">
Starting:
<input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}}
<button>Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form> <div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
</div>
ng-showW为false相当于display none <table ng-controller='RestaurantTableController'>
<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'>
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table> watch的使用
<div ng-controller="CartControllerWatch">
<input ng-model="vip">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{subtotal | currency}}</div>
</div>
</body>
</html>
JS
function HelloController($scope) {
$scope.greeting = {
text: 'Hello'
};
console.log($scope.greeting.text);
}
function CartController($scope) {
$scope.items = [{
title: 'Paint pots',
quantity: 8,
price: 3.95
}, {
title: 'Polka dots',
quantity: 17,
price: 12.95
}, {
title: 'Pebbles',
quantity: 5,
price: 6.95
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
function fundingController($scope) {
$scope.funding = {
startingEstimate: 0
};
$scope.computeNeeded = function() {
$scope.needed = $scope.funding.startingEstimate * 10;
};
computeMe = function(){
console.log('me change');
}
$scope.$watch('funding.me',computeMe);
}
function StartUpController($scope) {
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("Sorry, please get more customers first."+$scope.needed);
};
$scope.reset = function(){
$scope.needed = $scope.startingEstimate =0;
alert($scope.startingEstimate);
}
}
function DeathrayMenuController($scope) {
//$scope.menuState.show = false;//这样直接写会报错 提示$scope.menuState undefined
//可以这样
//$scope.menuState = {};
//$scope.menuState.show = false;
//不过最好还是用这样的方式
$scope.menuState ={
show: false
};
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
function RestaurantTableController($scope){
$scope.directory = [{name:"The Handsome Heifer", cuisine:"BBQ"},{name:"Green's Green Greens", cuisine:"Salads"},{name:"House of Fine Fish", cuisine:"Seafood"}];
$scope.selectRestaurant = function($selecteIndex){
$scope.selectedRow = $selecteIndex;
console.log($selecteIndex);
}
}
function CartControllerWatch($scope){
function checkVip(){
console.log($scope.vip);
}
$scope.returnVip = function (){
return $scope.vip;
}
$scope.$watch('vip',checkVip);//表示监听$scope.vip这个变量 写为$scope.vip检测不到变化的
//或者可以这样写
$scope.$watch($scope.returnVip,checkVip);
$scope.bill = {
discount : 0
};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95}
];
function calc(newValue,oldValue,scope){
var total = 0;
for(var i = 0, len=$scope.items.length; i < len; i++ ){
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.totalCart = total;
$scope.bill.discount = total > 100 ? 10 : 0;
$scope.subtotal = total - $scope.bill.discount;
}
//写为$scope.items watch不到变化
$scope.$watch('items' ,calc,true);
}
var shoppingModule = angular.module('ShoppingModule', []);
shoppingModule.factory('Items', function() {
var items = {};
items.query = function() {
// 在真实的应用中,我们会从服务端拉取这块数据 ...
console.log('service');
return [
{
title: 'Paint pots',
description: 'Pots full of paint',
price: 3.95
}, {
title: 'Polka dots',
description: 'Dots with polka',
price: 2.95
}, {
title: 'Pebbles',
description: 'Just little rocks',
price: 6.95
}
];
};
return items;
});
function ShoppingController($scope, Items) {
//console.log(Items.query());
$scope.items = Items.query();
}
First AngularJS !的更多相关文章
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九（ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数，小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive（指令）--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- 通过AngularJS实现前端与后台的数据对接（一）——预备工作篇
最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...
- AngularJS 系列 学习笔记 目录篇
目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)
随机推荐
- swift论坛正式上线
www.iswifting.com swift论坛正式上线.有问答专区,也有技术分享区,还有学习资料区,大家一起学习成长! 2014中国互联网大会于8月26日开幕. 政府主管部门.行业专家.企业领袖将 ...
- Javascript/Jquery 中each() 和forEach()的区别
从名字看上去这两个方法好像有点关系,但在javascript中它们区别还是挺大的. forEach() 用于数组的操作,对数组中的每个元素执行制定的函数(不是数组不能使用forEach()方法). 而 ...
- CSS3 grayscale滤镜图片变黑白实例页面
在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...
- api文档生成工具 C#
要为编写的程序编写文档,这是件费力气的事,如果能自动生成就好了. 不怕做不到,就怕想不到.这不,搜索到了Sandcastle 比较好的参考文章: 1.Sandcastle官方网址: http://sh ...
- eclipse中删除多余的工作空间记录
所以对于不再使用的工作空间,每次出现在eclipse的“文件”>>“切换工作空间”里面的时候就觉得特别不爽. 所以认真研究了eclipse目录之后让我找到了,删除不需要工作空间记录的方法. ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目，方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
- 转载:Ajax及 GET、POST 区别
转载:Ajax及 GET.POST 区别 收获: xhr.setRequestHeader(), xhr.getResponseHeader() 可以设置和获取请求头/响应头信息; new FormD ...
- php基础知识笔记
基本语法 php文件的后缀名可以是 .php .php3 .phtml 输出命令 echo , print 语句以;结束 注释 // /* */ 变量都带$前缀, 如: $x, $names, $th ...
- 原理图产生网络表后导进PADS之后，网络乱了的问题
问题描述:在Orcad中生成的网络表(格式.ASC),导进PADS9.2中(PADS9.2中已有一些元器件),结果报Mixing nets,如下图示. 仔细检查原理图中的这些nets,发现有的有错,有 ...
- 具有 CSA CCM 证明的 SOC 2 可简化 Windows Azure 客户的安全性评估过程
编辑人员注释:本文章由 Windows Azure 产品市场营销总监 Sarah Fender 撰写. 今天,我们宣布 Microsoft 的公共审计师 Deloitte 已经发布了有关 Window ...