AngularJS基础练习(3)
来源:互联网 发布:淘宝水印怎么设置大小 编辑:程序博客网 时间:2024/06/05 06:44
1.实现定时功能的效果:
相当于 java 中的 handler 延时效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <title></title></head><body ng-app="myApp"><div ng-controller="myCtrl"> <div>{{ nowtime }}</div> <div>等待5秒显示的文字:{{ mytext }}</div></div><script> var nowtime = function () { //获取到本地时间 return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString(); }; //$scope : 是一个JavaScript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。 //$interval : 用来处理间歇性的事情,例如:定时器的功能 //$timeout : 取消与承诺相关联的任务,例如:执行自定义的某种方法来抵消定时功能,在定时结束后执行 var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope, $interval, $timeout) { //获取本地时间,每秒刷新一次 $interval(function () { $scope.nowtime = nowtime(); }, 1000); //定时功能,五秒后自动输出“Java B C”文字样式 $timeout(function () { $scope.mytext = "Java B C"; }, 5000); });</script></body></html>
2.使用 angularJS 输出 .json 中的信息:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.0.js"></script> <title></title> <script type="text/javascript"> var app = angular.module("myApp", []); //将 .json 文件添加到 app标签中 app.value("url_book", "book.json"); app.value("url_books", "books.json"); ---->//.then()方法是异步执行 | //就是当.then()前的方法执行完后再执行then()内部的程序 | //这样就避免了,数据没获取到等的问题 | | app.controller("bookCtrl", function ($scope, $http) { | //Response 对象用于从服务器向用户发送输出的结果 ----> $http.get("book.json").then(function (response) { $scope.book = response.data; //从输出消息中读取响应数据 //将json中的信息传入到scope.book中 }, function (response) { console.log(response.status); //Status 属性规定由服务器返回的状态行的值 //例如: //response.Status="401 Unauthorized"//登录时账号密码有问题,会提示401错误 //response.Write(response.Status) //response.End }); }); app.controller("booksCtrl", function ($scope, $http) { $http.get("books.json").then(function (response) { $scope.books = response.data; }, function (response) { console.log(response.status); }); }); </script></head><body ng-app="myApp"><div ng-controller="bookCtrl"> <ul> <li>ID:{{ book.id }}</li> <li>标题:{{ book.title }}</li> <li>类型:{{ book.type }}</li> <li>描述:{{ book.description }}</li> <li>图片:<img src="{{ book.picture }}"/></li> <li>是否推荐:{{ book.isRecommend }}</li> <li>上架时间:{{ book.dtCreated }}</li> </ul></div><div ng-controller="booksCtrl"> <table border="1"> <tr> <th>ID</th> <th>标题</th> <th>类型</th> <th>描述</th> <th>图片</th> <th>推荐</th> <th>创建时间</th> </tr> <tbody ng-repeat="book in books"> <tr> <td>{{book.id}}</td> <td>{{book.title}}</td> <td>{{book.type}}</td> <td>{{book.description}}</td> <td> <img src="{{book.picture}}" width="80px" height="80px"/> </td> <td> <i ng-if="book.isRecommend">是</i> <i ng-if="!book.isRecommend">否</i> </td> <td>{{book.dtCreated}}</td> </tr> </tbody> </table></div></body></html>
阅读全文
0 0
- AngularJS基础练习(3)
- AngularJS基础练习(1)
- AngularJS基础练习(2)
- angularJs基础(3)
- angularJs基础(1)
- angularJs基础(2)
- angularJS 练习
- angularjs 练习
- RxJava基础练习(3)
- Java基础练习(3)
- [javA学习3]angularJS练习1
- AngularJS基础
- AngularJs基础
- AngularJS基础
- AngularJS基础
- AngularJS基础
- AngularJS基础
- AngularJs基础
- OpenCV2编程手册笔记之 10.5应用光流法跟踪视频中的特征点
- android插件化开发activity篇
- Spring boot Druid监控、Mybatis、pageHelper集成
- eclipse在tomcat中项目别名
- Java中类与对象(二):构造方法
- AngularJS基础练习(3)
- OpenCV中两个旋转矩形RotatedRect的交集
- spring容器启动,初始化某个方法(init)
- javaWeb文件上传下载
- 第六周第一课--队列
- php保留小数位,和四舍五入(sprintf, number_format, round
- [学习][poj3264]稀疏表(ST表) Balanced Lineup
- Linux下实现SSH无密码验证登陆
- MvvM datagrid多行选中绑定