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 - 模块 (持续更新)
随机推荐
- struts2中从数据库中读取数据，并在JSP页面中遍历保存有JavaBean对象的List对象
0x1:前言 前面搭建struts就不说了,大家都能成功完毕. 0x2:Model 这里我们须要一个Model类来接收 <span style="font-size:10px;font ...
- php 设置字符集为utf-8
header("Content-Type:text/html;charset=utf-8");
- DataUml Design 教程6-DataUML Design 1.1版本号正式公布（支持PD数据模型）
从DataUML Design正式公布到如今有两个月了.因为近期比較忙,到如今才公布1.1版本号. 以后本人会一直坚持不断完好DataUML Design软件,希望广大程序员们多多支持. 一.1.1版 ...
- 全互联结构DVPN综合配置示例
以下内容摘自正在全面热销的最新网络设备图书“豪华四件套”之一<H3C路由器配置与管理完全手册>(第二版)(其余三本分别是:<Cisco交换机配置与管理完全手册>(第二版).&l ...
- .NET读取Project 2007 MPP项目文件
Project文件读取: 方法1:Microsoft.Project.OLEDB.11.0 string strConn = "Provider=Microsoft.Project.OLED ...
- linq中的cast<T>()及OfType<T>()
DataTable dt=...........//获取从数据库中取出的数据(假设只有一条记录) //Cast<T>()用来将非泛型的序列转换为泛型的序列 DataRow row=dt.R ...
- JS中的this都有什么作用？
1.全局代码中的this 是指向全局对象,在浏览器中是window alert(this) //window 2.作为单纯的函数调用: function fooCoder(x) { this.x = ...
- 从零开始PHP学习 - 第三天
写这个系列文章主要是为了督促自己 每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...
- java核心技术学习笔记之三程序设计结构
一 基本数据结构 必须包括在类中 必须具备 public static main方法 大小写敏感 二.数据类型 四种整数类型: Int 4字节 short 2字节 long8字节 byte1字节 二种 ...
- DatabaseMetaData的用法(转)
http://blog.csdn.net/sdliubo/article/details/6546889