angular.js学习笔记（二）

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服务解析数据并显示。

angular.js学习笔记（二）

猜你喜欢