angular.js学习笔记（一）

1.ng-options指令与ng-repeat指令动态创建下拉列表

angular.js中，通过以上两种方式都可以动态创建下拉列表。但是，在实际使用上两者有所不同：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>select</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body>
		<div ng-app='myApp' ng-controller='myCtrl'>
			<h2>ng-options</h2>			
			<select ng-model='selectPerson' ng-options='p.name for p in persons'></select>
			<p>
				Name:{{selectPerson.name}}<br>
				Age:{{selectPerson.age}}
			</p>
			<hr />
			
			<h2>ng-repeat</h2>
			<select ng-model='person'>
				<option ng-repeat='p in persons' value="{{p.name}}">{{p.age}}</option>
			</select>
			<p>{{person}}</p>
		</div>
	</body>
	<script>
		var app = angular.module('myApp',[]);
		
		app.controller('myCtrl',function($scope){
			$scope.persons = [
				{name:"Xiaoming",age:12},
				{name:"Richard",age:23},
				{name:"Bob",age:45}
			];
		})
		
	</script>
</html>

以上两种方式在实际效果上没有太大区别，但是值得注意的是：使用ng-options指令创建的下拉列表在选择时，将一个Object类型绑定到模型上，而在使用ng-repeat指令创建的下拉列表只能将某一个字符值绑定到模型上。因此在实际使用时，前者更有价值。

2.$http服务

$http服务是angular.js中直接与Web服务器进行交互的核心服务，在底层仍使用XMLHttpRequest对象，类似于Jquery中对ajax的封装。常见使用语法有：

$http.get(url,[config]);

$http.post(url,data,[config]);

$http.delete(url,[config]);

$http.put(url,data,[config]);

或者直接使用$http(config)来配置参数，核心配置属性包括:method,url,params,data,headers,cache,timeout,

responseType等。

以下示例用于向百度API-Store请求天气信息并加载到页面上：

<!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'>
			<p>
				城市：西安<br>
				空气污染指数：{{weatherInfo.aqi.city.aqi}}<br>
				空气质量：{{weatherInfo.aqi.city.qlty}}
			</p>
		</div>
	</body>
	
	<script>
		var app = angular.module('myApp',[]);
		var headers = {"apikey": "1621ec4f080136e1e42cc6794908de60"};
		
		app.controller('myCtrl',function($scope,$http){
			$http({
				method:"get",
				url:"http://apis.baidu.com/heweather/weather/free",
				params:{
					"city":"xian"
				},
				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];
				}
			})
			.error(function(data,status){
				$scope.weatherInfo = data;
				console.log(status);
			});
		})
		
	</script>
</html>

angular.js学习笔记（一）

猜你喜欢