1.常见DOM指令
ng-disabled:用于控制节点是否处于禁用状态
ng-show:指定一个html元素是否可见(可使用表达式作为判别条件)
ng-hide:用于隐藏或显示一个元素。
2.angular.js事件
ng-click指令用于声明一个点击事件。如下,对天气应用进行改进,使用查询按钮挂接点击事件,查询不同城市的天气状况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>Weather</title>
</head>
<body>
<div ng-app='myApp' ng-controller='myCtrl'>
<input ng-model='inputCity' type="text" />
<button ng-click="queryInfo()">查询</button>
<p>
城市:{{weatherInfo.basic.city}}<br>
空气污染指数:{{weatherInfo.aqi.city.aqi}}<br>
空气质量:{{weatherInfo.aqi.city.qlty}}<br>
天气:{{weatherInfo.daily_forecast[0].cond.txt_d}}<br>
温度:{{tmpInfo}}
</p>
</div>
</body>
<script>
var app = angular.module('myApp',[]);
var headers = {"apikey": "1621ec4f080136e1e42cc6794908de60"};
app.controller('myCtrl',function($scope,$http){
$scope.inputCity = '西安';
$scope.queryInfo = function(){
$http({
method:"get",
url:"http://apis.baidu.com/heweather/weather/free",
params:{
"city":$scope.inputCity
},
headers:headers,
responseType:"json",
})
.success(function(data,status){
data = data['HeWeather data service 3.0'];
if(data.length>0){
console.log(data[0]);
$scope.weatherInfo = data[0];
$scope.tmpInfo = $scope.weatherInfo.daily_forecast[0].tmp.min + '~'
+ $scope.weatherInfo.daily_forecast[0].tmp.max + '℃';
}
})
.error(function(data,status){
$scope.weatherInfo = data;
console.log(status);
});
}
})
</script>
</html>
通过ng-click事件将model数据发送到服务器端,调用http服务解析数据并显示。