<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/libs/bootstrap.css" /> </head> <body ng-app="app" ng-controller="ctrl"> <p> [功能]<br/> {{gongneng}} </p> <p> 255转成16进制为：{{num}} </p> </body> <script src="https://www.jb51.net/libs/angular.js"></script> <script> angular.module("app",[]) /*在配置阶段声明procide服务！*/ .controller("ctrl",function($scope,hexafy){ $scope.gongneng = hexafy.gongneng; $scope.num = hexafy.myFunc(255); }) /*定义一个provider服务*/ .provider('hexafy',function(){ // this.gongneng = "将转入的数字，转为16进制"; this.$get = function(){ var obj = { gongneng : "将转入的数字，转为16进制", myFunc : function(x){ return x.toString(16); } } return obj; } }) </script> </html>
五、Angular中的$http
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/libs/bootstrap.css" /> </head> <body ng-app="app" ng-controller="ctrl"> <!--<pre> {{data}} </pre>--> <div> <div > <div> <div>H5-1701班级信息表</div> </div> <div> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> <th>语文成绩</th> <th>数学成绩</th> <th>总分</th> </tr> </thead> <tr ng-repeat="item in data | orderBy:'score.chinese + score.math'"> <td ng-bind="item.name"></td> <td ng-bind="item.age"></td> <td ng-bind="item.hobby"> <!--<span ng-repeat="a in item.hobby">{{a}}</span>--> </td> <td ng-bind="item.score.chinese"></td> <td ng-bind="item.score.math"></td> <td ng-bind="item.score.chinese + item.score.math"></td> </tr> </table> </div> </div> </div> </body> <script src="https://www.jb51.net/libs/angular.js"></script> <script> angular.module("app",[]) .controller("ctrl",function($scope,$http){ $http.post('h51701.json',{/*传递的参数对象*/}) .then(function(res){ $scope.data = res.data;//data 从返回的信息中，取出需要的数据。为JSON对象(数组) }); }) </script> </html>
六、Angular中的select
使用数组作为数据源。
其中，x表示数组的每一项。
默认会将x直接绑定到option的value中。
而option显示的内容，有前面的x for... 决定
<select ng-model="name" ng-options="x.site for x in sites"> </select>
使用对象作为数据源.
其中，(x,y)表示键值对，x为键，y为值。
默认会将值y绑定到option的value中.
而option显示的内容，有前面的x for... 决定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="https://www.jb51.net/libs/bootstrap.css" /> <style type="text/css"> *{ margin: 10px; } </style> </head> <body ng-app="app" ng-controller="ctrl"> <select ng-model="name" ng-options="x for (x, y) in sites"> </select> <div> 您选择的是：{{name}} </div> <table> <tr> <th>序号</th> <th>姓名</th> </tr> <tr ng-repeat="item in options"> <td>{{$index +1}}</td><!--$index 表示遍历的索引，从0开始--> <td>{{item}}</td> </tr> </table> </body> <script src="https://www.jb51.net/libs/angular.js"></script> <script> angular.module("app",[]) .controller("ctrl",function($scope){ $scope.options = ["张三","李四","王二麻子","杰小瑞"]; $scope.sites = { site01 : "Google", site02 : "Runoob", site03 : "Taobao" }; }) </script> </html>
七、Angular中的DOM与事件
ng-disabled="true/false" 当传入true时，控件禁用。传入false是，启用；
ng-show 默认隐藏 传入true时显示；
ng-hide 默认显示 传入true是隐藏；
ng-click定义了AngularJS中的点击事件。
只能触发绑定在Angular作用域中的属性与方法。