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