ng-init
<div ng-init="city=['shanghai','beijing','zhengzhou']">
<li ng-repeat="c in city">
<!-- 坐标 -->
<span>{{$index}}</span>
<!-- 是不是第一个 -->
<span>{{$first}}</span>
<!-- 是不是中间的 -->
<span>{{$middle}}</span>
<!-- 是不是最后一个 -->
<span>{{$last}}</span>
<!-- 遍历的值 -->
<span>{{c}}</span>
</li>
</div>
结果:
0 true false false shanghai
1 false true false beijing
2 false false true zhengzhou
ng-click
html
<button ng-click=changeButton($event)>切换</button>
{{flag}}
js
var myInjectorModule = angular.module("MyInjectorModule",[]);
myInjectorModule.controller("aa",["$scope",function($scope){
$scope.flag=true;
$scope.changeButton=function(event){
$scope.flag=!$scope.flag
// 用angular.element()方法将button(event.target)对象转换成jquery对象
angular.element(event.target).html('haha')
}
}])
实现计时器效果
<p ng-bind="data | date: 'y-M-d H:m:s'"></p>
$scope.data = new Date();
setInterval(function(){
$scope.$apply(function(){
$scope.data=new Date()
})
},1000)
结果:
2017-10-3 22:53:10
ng-style
//第一种方法:
<div ng-style="{'color':'red','margin-top':'50px'}">
ng-style
</div>
//第二种:
$scope.styledemo={
'color':'red',
'margin-top':'50px'
}
<div ng-style="styledemo">
ng-style
</div>
ng-class
red是类名,ng-class后面跟{类名:boolean},是一个表达式,可以用一个变量控制
<style>
.red{
color:red;
}
</style>
<div ng-init="city=['shanghai','beijing','zhengzhou']">
<li ng-repeat="c in city" ng-class="{red:flag}">
<!-- 坐标 -->
<span>{{$index}}</span>
<!-- 是不是第一个 -->
<span>{{$first}}</span>
<!-- 是不是中间的 -->
<span>{{$middle}}</span>
<!-- 是不是最后一个 -->
<span>{{$last}}</span>
<!-- 遍历的值 -->
<span>{{c}}</span>
</li>
</div>
<button ng-click=changeButton($event)>切换</button>
{{flag}}
js
$scope.flag=true;
$scope.changeButton=function(event){
$scope.flag=!$scope.flag
// 用angular.element()方法将button(event.target)对象转换成jquery对象
angular.element(event.target).html('haha')
}
ng-switch
flag是变量
<div ng-switch on="flag">
<p ng-switch-when='true'>1111</p>
<p ng-switch-when='false'>2222</p>
</div>
ng-if
<div ng-if="flag">
show
</div>