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学习笔记之自定义指令实例代码讲解，具体代码如下所示： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>AngularDirective</title>...
### Angular学习笔记 #### 1. 验证电子邮件地址 在Angular中，可以使用表单验证功能来检查用户输入的电子邮件地址是否有效。例如，在模板中可以添加一个`<span>`标签，用于显示错误消息，如果电子邮件格式不正确，...
### Angular V4 学习笔记知识点详解 #### 组件模板设置 在Angular中，组件是构建用户界面的基本单元。为了使这些组件能够显示相应的视图，我们需要定义它们的模板。 - **Template**: 它用于直接定义组件的HTML结构...
这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例，对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说，都是一个宝贵的资源。 首先，让我们来讨论JavaScript的基础...
### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库，虽然在本文档中作者将其称为“工具”，但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...
总而言之，这份AngularJS的学习笔记为初学者提供了一个由浅入深、涵盖AngularJS基础知识和核心概念的全面指南。通过对这份笔记的学习，初学者可以逐步掌握AngularJS的使用，从而有效地进行前端开发。
这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录，对于初学者或者想要深入理解JavaScript的人来说，是一份宝贵的资源。 JavaScript与Java虽然名字相似，但两者实际上是不同...
3.Angular4学习笔记2 Angular 2 TypeScript Live Template Angular 4.0 架构详解 Angular 4.0 内置指令全攻略 Angular 4.0从入门到实战 angular 如何操作 DOM angular4 cli命令大全 angular4官方教程 Angular4官方...
### AngularJS 学习笔记 #### 一、AngularJS 概述 AngularJS 是一个用于构建动态Web应用的开源框架，由 Google 维护。它通过扩展 HTML 的功能来简化 Web 开发，并允许开发者以声明式的方式编写代码，极大地提高了...
这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据，数据类型分为基本类型（如字符串...
AngularJS 是一个强大的JavaScript框架，由Google维护，用于构建单页Web应用程序（SPA）。这个框架以其数据绑定和依赖注入机制闻名，极大地简化了前端开发。在这个"angularjs-studies"项目中，我们可以深入探讨...
### Vue.js 学习笔记与精华总结 #### 一、Vue.js 概述与发展历程 Vue.js 是一种用于构建用户界面的渐进式框架。它旨在通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 的设计目标是实现轻量级的...
Angular.js 是一个强大的前端 JavaScript 框架，由 Google 维护，用于构建单页应用程序（SPA）。在“angular-note”这个项目中，我们可以推测它是一个使用 Angular.js 实现的笔记应用，允许用户创建、编辑和管理个人...
VueJS学习笔记主要涵盖了关于Vue.js这一前端框架的深度学习内容。Vue.js是一个轻量级且功能强大的**渐进式框架**，它以其模块化、易上手和高性能的特性在现代Web开发中受到广泛欢迎。不同于其他如Angular或React等...
**AngularJS 框架详解** AngularJS 是一个强大的JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（模型-视图-控制器...通过深入学习和实践，你可以有效地利用AngularJS构建高效、可维护的Web应用程序。
【AngularJS学习笔记1】 AngularJS 是一个强大的前端JavaScript框架，用于构建动态Web应用程序。它通过数据绑定和依赖注入简化了HTML页面与JavaScript代码之间的交互。这篇笔记将深入探讨AngularJS的一些基本概念，...