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>