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

angular.js学习笔记（二）

2016-03-17 10:22 417 查看

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

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

标签：

相关文章推荐

新的分享

章节导航