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