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 - 模块 (持续更新)
随机推荐
- Android UI高级交互设计Demo
首先:是google的新标准 Google Material design 开源项目 1.直接拿来用!十大Material Design开源项目 2.收集android上开源的酷炫的交互动画和视觉效果 ...
- 对于System.Net.Http的学习（一）——System.Net.Http 简介(转)
最新在学习System.Net.Http的知识,看到有篇文章写的十分详细,就想转过来,自己记录下.原地址是http://www.cnblogs.com/chillsrc/p/3439215.html? ...
- JavaSE复习日记 : 多态
/** * 里氏替换原则 : * 能使用父类的地方,一定可以使用子类 * 什么是多态 : * 父类的引用,指向子类的对象 * 多态的前提条件 : * 有继承关系的两个类 * 多态的目的 : * ☆☆☆ ...
- nginx install
./configure --prefix=/home/allen.mh/local/nginx --with-http_ssl_module --with-http_sub_module --with ...
- JavaScript版排序算法
JavaScript版排序算法:冒泡排序.快速排序.插入排序.希尔排序(小数据时,希尔排序会比快排快哦) //排序算法 window.onload = function(){ var array = ...
- bzoj 1088: [SCOI2005]扫雷Mine
题目链接 1088: [SCOI2005]扫雷Mine Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2525 Solved: 1495[Submi ...
- 直接调用类成员函数地址（用汇编取类成员函数的地址，各VS版本还有所不同）
在C++中,成员函数的指针是个比较特殊的东西.对普通的函数指针来说,可以视为一个地址,在需要的时候可以任意转换并直接调用.但对成员函数来说,常规类型转换是通不过编译的,调用的时候也必须采用特殊的语法. ...
- 命令行方式运行yii2程序
测试环境,yii 2.0.3版本 web访问方式,控制器放在controllers目录下 ,浏览器访问如下地址 http://127.0.0.1/index.php?r=[controller-nam ...
- swift学习第五章-字典的使用
//以下是关于字典的 //字典的格式[key:value] //字典能够存放基本类型和对象类型的 //声明一个字典 var dictionary1=["key1":"鸭鸭 ...
- HDU ACM 1063 Exponentiation 大实数乘方
分析:大实数乘方计算. #include<iostream> #include<string> using namespace std; struct BigReal //高精 ...