您的位置：首页 > Web前端 > AngularJS

angular.js学习笔记（一）

2016-03-16 17:21 363 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航