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>
{{ '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.45 | currency:'¥'}} <!--将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位-->
{{ 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>
<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);
});
也可写成
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.getElementById getElementById 获取对 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;
})
}