标签：
10.AngularJS ng-click
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button> <button ng-click="pressMe()"/> 在$scope域中定义的自己的pressMe方法
<button ng-click="printf(person)"/> ng-click方法传递一个对象
9.AngularJS ion-radio,ion-checkbox ,ion-toggle
<div class="list card">
<div class="item item-divider"> 当前支付方式: {{ data.pay }} </div>
<ion-radio ng-repeat="item in payList" ng-value="item.value" ng-model="data.pay" ng-change="payChange(item)" name="pay"> {{ item.text }} </ion-radio>
<!--选中颜色 绑定json列表数据的text和checked-->
<ion-checkbox class="checkbox-dark" ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }}: {{item. checked }} </ion-checkbox>
<ion-toggle ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked"> {{ item.text }} </ion-toggle>
</div> <!--绑定json对象数据的checked 数据改变事件-->
<ion-checkbox ng-model="pushNotification.checked" ng-change="pushNotificationChange()"> Push Notifications </ion-checkbox>
<ion-toggle ng-model="pushNotification.checked" ng-change="pushNotificationChange()"> Push Notifications </ion-toggle>
<!--绑定-->
<ion-checkbox ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed"> Newsletter </ion-checkbox>
<ion-toggle ng-model="emailNotification" ng-true-value="Subscribed" ng-false-value="Unubscribed" toggle-class="toggle-assertive" > Newsletter </ion-toggle> $scope.devList = [
{ text: "HTML5", checked: true},
{ text: "CSS3", checked: false},
{ text: "JavaScript", checked: false}
];
8.AngularJS ng-options
<div class="item item-divider"> select: {{ data.pay }}
<select ng-model="data.pay" ng-options="pay.value as pay.text for pay in payList" ng-change="payChange1(data)"></select>
</div> <div class="item item-divider"> mycity: {{ mycity }}
<select ng-model="mycity" ng-options="city.value as city.name for city in Cities"></select>
<select ng-model="mycity.value" ng-options="city.value as city.name group by city.group for city in Cities" ng-change="cityChange(mycity)"></select>
</div> $scope.mycity = { id: 1, name: ‘北京‘,value: ‘beijng‘, group: ‘中国‘ };
$scope.Cities = [{ id: 1, name: ‘北京‘,value: ‘beijng‘, group: ‘中国‘ }, { id: 2, name: ‘上海‘,value: ‘shanghai‘, group: ‘中国‘ }, { id: 3, name: ‘广州‘,value: ‘guangzhou‘, group: ‘中国‘ }]; $scope.payList = [{ text: "albaba alipay", value: "alipay" },{ text: "ebay paypal", value: "paypal" }];
$scope.data = {pay: ‘alipay‘};
$scope.pay1 = { text: "albaba alipay", value: "alipay" };
$scope.payChange1 = function(pay) {
console.log("pay:", pay);
}; $scope.payChange = function(item) {
console.log("pay:", item.pay);
};
$scope.cityChange = function(item) {
console.log("item", item);
};
7.Angular css类和样式之 ng-class 和 ng-style标签
需要一个表达式。表达式执行的结果可能是下列之一：
一个字符串，表示空间隔开的类名。
一个类名数组
一个类名到布尔值的映射
通过 {{}} 解析来进行数据绑定，从而能够动态地设置类和样式。http://www.jb51.net/article/70095.htm
<span ng-style="myColor">your color</span>
$scope.myColor={color:‘blue‘};
$scope.myColor={cursor: ‘pointer‘,color:‘blue‘};
<!-- 动态样式-->
<style type="text/css">
.menu-disabled-true{
opacity:1;
color: red;
-webkit-transition:all 1000ms linear;
-moz-transition:all 1000ms linear;
-o-transition:all 1000ms linear;
}
.menu-disabled-false{
opacity: 0;
-webkit-transition:all 1000ms linear;
-moz-transition:all 1000ms linear;
-o-transition:all 1000ms linear;
}
</style>
<div class="menu-disabled-{{isDisabled}}">adfadfadasda</div>
<button ng-click="test()">隐藏</button>
<button ng-click="test1()">显示</button>
<button ng-click="test11()">切换</button>
$scope.isDisabled = true;
$scope.test = function () {
$scope.isDisabled = ‘false‘;
};
$scope.test1 = function () {
$scope.isDisabled = ‘true‘;
};
$scope.test11 = function () {
$scope.isDisabled = !$scope.isDisabled;
};
<!-- 类名和布尔映射 -->
<style type="text/css">
.error { background-color: red; }
.warning { background-color: yellow; }
</style>
<div ng-class=‘{error:isError, warning:isWarning}‘>{{messageText}}</div>
<button ng-click="showError()">error</button>
<button ng-click="showWarning()">warning</button> $scope.isError = false; $scope.isWarning = false; $scope.messageText = ‘default, default‘; $scope.showError = function () { $scope.messageText = ‘This is an error‘; $scope.isError = true; $scope.isWarning = false; }; $scope.showWarning = function () { $scope.messageText = ‘Just a warning, donot warry‘; $scope.isWarning = true; $scope.isError = false; };<!-- 选中行 -->
选中的行:设置 ng-class 的值为 {selected:$index==selectedRow}，当模型调用selectedRow 时将匹配 ng-repeat 的 $index，进而显示选中的样式。同样我们设置 ng-click 来通知控制器用户点了哪一行 <style type="text/css">
.selected{
background-color: lightgreen;
}
</style>
<div ng-repeat="item in items" ng-class=‘{selected:$index==selectedRow}‘ ng-click=‘selectedWhich($index)‘>
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
</div>
$scope.items = [{ product_name: "Product 1", price: 50 },{ product_name: "Product 2", price: 20 }, { product_name: "Product 3", price: 180 } ];
$scope.selectedWhich = function (row) {
$scope.selectedRow = row;
}
6.AngularJS {{ expression }}， ng-bind 和 输出 及 fiter
表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量，表达式执行进行常用运算及输出。
表达式可以写在 HTML 中，支持过滤器 ， 不支持条件判断，循环及异常
如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
数字运算和字符串运算及输出
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>
<div ng-app="" ng-init="firstName=‘John‘;lastName=‘Doe‘">
<p>姓名： {{ firstName + " " + lastName }}</p>
<p>姓名： <span ng-bind="firstName + ‘ ‘ + lastName"></span></p>
</div> 对象和数组输出
<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
<p>姓为 {{ person.lastName }}</p>
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div> fiter
<pre ng-bind="devList | json"></pre> <!--查看json对象-->
<span>{{1288323623006 | date:‘yyyy-MM-dd HH:mm:ss Z‘}}</span>
<!--使用ISO标准日期格式 -->
{{ ‘2015-05-20T03:56:16.887Z‘ | date:"MM/dd/yyyy @ h:mma"}}
<!--使用13位（单位：毫秒）时间戳 -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma"}}
<!--指定timezone为UTC -->
{{ 1432075948123 | date:"MM/dd/yyyy @ h:mma":"UTC"}}
{{ 12 | currency}} <!--将12格式化为货币，默认单位符号为 ‘$‘, 小数默认2位-->
{{ 12.45 | currency:‘￥‘}} <!--将12.45格式化为货币，使用自定义单位符号为 ‘￥‘, 小数默认2位-->
{{ 12.45 | currency:‘CHY￥‘:1}} <!--将12.45格式化为货币，使用自定义单位符号为 ‘CHY￥‘, 小数指定1位, 会执行四舍五入操作 -->
{{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币， 不改变单位符号， 小数部分将四舍五入 -->
5.AngularJS ng-hide/ng-show/ng-disabled/ng-if/ng-switch on
<input type="checkbox" ng-model="mySwitch">
<button ng-disabled="mySwitch">点我!</button>
直接赋值和使用表达式
<p ng-show="hour > 12">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<i class="icon ion-person" ng-show="($index % 2)== 0"></i>
<i class="icon ion-checkmark" ng-hide="useSign.status == ‘2‘"></i>
<element ng-if="expression"></element> ng-if 如果表达式返回 false 则从 DOM 中会移除整个元素，如果为 true，则会添加元素。 ng-hide 隐藏元素
<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar"><h1>Welcome</h1></div>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>please input your baby‘s name:<input type="text" ng-disabled="!person.hasBaby"/></span>
4.angular.foreach
var objs =[{a:1},{a:2}];
angular.forEach(objs, function(data,index,array){
//data等价于array[index]
console.log(data.a+‘=‘+array[index].a);
});
参数如下： objs：需要遍历的集合 data:遍历时当前的数据 index:遍历时当前索引 array:需要遍历的集合，每次遍历时都会把objs原样的传一次。
也可写成
var objs =[{a:1},{a:2}];
angular.forEach(objs, function(data){
console.log(data.a);
});
3.angular.element
angular.element(document.getElementById(‘username‘)).scope()
1.angular.element（）. http://www.jb51.net/article/59544.htm 2.document.getElementByIdgetElementById 获取对 ID 标签属性为指定值的第一个对象的引用
getElementsByName 根据 NAME 标签属性的值获取对象的集合
getElementsByTagName 获取基于指定元素名称的对象集合 3.document.querySelector(CSS selectors)document.querySelector("p"); 获取文档中第一个 <p> 元素：
document.querySelector(".example"); 获取文档中 class="example" 的第一个元素:
document.querySelector("p.example"); 获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("a[target]"); 获取文档中有 "target" 属性的第一个 <a> 元素：
2.AngularJS init、repeat
ng-init初始化变量,对象,数组，ng-bind及{{}}
<div class=‘item‘ ng-init=" name=‘aurora‘;age=‘18‘ "> <p ng-bind=" name+‘,‘+age "></p> <p>{{ name+‘,‘+age }}</p> <p ng-bind="name"></p> <p ng-bind="age"></p> </div> <div class=‘item‘ ng-init="hero={name:‘aurora‘,role:‘sup‘,line:‘刮风}"> <p ng-bind="hero.name+‘,‘+hero.role+‘,‘+hero.line"></p> <p ng-bind="hero.name"></p> <p ng-bind="hero.role"></p> <p ng-bind="hero.line"></p> </div> <div class=‘item‘ ng-init="heros=[‘女神‘,‘天使‘,‘魂锁‘]"> <p ng-bind="heros[0]+‘,‘+heros[1]+‘,‘+heros[2]"></p> <p ng-bind="heros[0]"></p> <p ng-bind="heros[1]"></p> <p ng-bind="heros[2]"></p> </div>
ng-repeat遍历 $index
遍历集合
<li ng-repeat="x in names"> 无重复集合
<li ng-repeat="x in number track by $index"> 重复集合 遍历对象 <ul ng-repeat="obj in objs ">
<li ng-repeat="(key,value) in object track by $index"> {{key+":"+value}}</li>
<li ng-repeat="(key,value) in obj "> {{key+":"+value}} </li> 按原有顺序
</ul>
<tr ng-repeat="(key, value) in objs ">
<td><span ng-bind="$index"></span></td>
<td><span ng-bind="key"></span>:<span ng-bind="value"></span></td>
<td><span ng-bind="$odd"></span></td>
<td><span ng-bind="$even"></span></td>
<td><span ng-bind="$first"></span></td>
<td><span ng-bind="$last"></span></td>
<td><span ng-bind="$middle"></span></td>
</tr>
<div ng-repeat-start="(key,value) in objs">
<p><span ng-bind="$index"></span></p>
<p><span ng-bind="key"></span>:<span ng-bind="value"></span></p>
</div>
<div ng-repeat-end></div>
1.angularJS link $attrs 和 $element
link: function (scope, element, iAttrs) { console.log( iAttrs.$$element[0]); //
console.log( iAttrs.$attr); //当前指令对象的属性集合
console.log( iAttrs.$attr.type + " " + iAttrs.$attr.animation); //读取属性 //循环 for(var i=0; i<attrs.repeater - 1; i++) { // } //设置 attrs.$set(‘b‘, ‘ooo‘);//给属性设置b，值为ooo，
attrs.$$element[0].disabled = true; //当前指令对象element,它就相当于jQuery对象，以下 console.log( element); element.bind(‘click‘, function () { scope.$apply(function () {
scope.content = ‘这是点击后的显示的内容‘;
})
});
var button2 =angular.element(document.getElementById("btn2")) // button2.bind(‘click‘, function () { });
var button1 = jQuery(element).find(‘button‘).first();
button1.bind(‘click‘, function () { // scope.$apply(function () { scope.message = ‘这是点击按钮后的值‘; });
button1[0].disabled = true;
})
}
Angularjs学习笔记1
标签：
原文地址：http://www.cnblogs.com/dengzy/p/5348428.html
