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 - 模块 (持续更新)
随机推荐
- Dearmweaver CS6 如何添加emmet 插件
一.关于emmet插件 已经接触前端工具的小伙伴们早听说过这个插件的鼎鼎大名了吧,emmet可以说是前端工程师的利器,就连老牌dreamweaver 都可以支持,我们怎么好意思拒绝这个好东西呢? 有 ...
- JavaScript之获取和设置元素属性
1.与我前面的随笔获取元素的那些方法不同http://www.cnblogs.com/GreenLeaves/p/5689075.html 获取元素属性的方法getAttribute()不属于docu ...
- param
页面之间值传递用param作为参数,提高网站安全性
- 如何在oracle中导入导出（备份&恢复）dmp数据库文件
Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. 利 ...
- mina、netty消息边界问题（采用换行符）
在TCP连接开始到结束连接,之间可能会多次传输数据,也就是服务器和客户端之间可能会在连接过程中互相传输多条消息.理想状况是一方每发送一条消息,另一方就立即接收到一条,也就是一次write对应一次rea ...
- Servlet基础知识（三）—— 会话机制Session，Session和Cookie的异同
Servlet会话机制: Http是一种无状态协议,它是无记忆的.也就是说,服务器不会保存用户的任何信息,当同一用户再次去访问时,服务器是不认识你的,它还是会建立新的连接. 但有时候我们需要服务器保留 ...
- BOM 浏览器对象模型学习
window对象属性 innerWidth/innerHeight 浏览器窗口的内部宽度与高度 outerWidth/outerHeight 浏览器的外部宽度与高度 length window.fra ...
- XSS CSRF
XSS CSRF XSS 参考 https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC ...
- Oracle字符集转换
这几天在工作中碰到一个字符乱码的问题,发现在cmd窗口的sqlplus中直接update一个中文和使用@调用一个文件作同样更新的时候,存储的结果 竟不一样.一时比较迷惑,对Oracle ...
- 解析ECC与RECC内存之间的区分
普通的定义上区分:内存,是连接CPU 和其他设备的通道,起到缓冲和数据交换作用.当CPU在工作时,需要从硬盘等外部存储器上读取数据,但由于硬盘这个“仓库”太大,加上离CPU也很“远”,运输“原料”数据 ...