angular.js初探

简介: 2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这里使用的是bootstrap提供的cdn 接下来是自己的js代码 1 //bbsController 2 bbsApp = angular.

2015年7月27日 22:26:35 星期一

用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复

首先要引用js文件, 我这里使用的是bootstrap提供的cdn

<script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>

接下来是自己的js代码

 1 //bbsController
 2 bbsApp = angular.module('bbsApp',[]);
 3 // bbsApp.controller('bbslist',['$scope',function($scope) {
 4 //     $scope.answers= getBBSData();
 5 //     $scope.bbsUrl = getBBSUrl();
 6 //     //事件
 7 //     $scope.showReplay = function(index) {
 8 //         var id = $scope.answers[index].id;
 9 //         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;
10 //         $http.get(url).success(function(jsonReplay){
11 //             var replayData = 'replay_'+id;
12 //             $scope.replayData = jsonReplay;
13 //         });
14 //     }
15 
16 // }]);
17 
18 bbsApp.controller('bbslist',function($scope, $http) {
19     $scope.answers= getBBSData();
20     $scope.bbsUrl = getBBSUrl();
21     //点击事件
22     $scope.showReplay = function(index) {
23         var id = $scope.answers[index].id;
24         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;
25         $http.get(url).success(function(jsonReplay){
26             for (i in jsonReplay) {
27                 var intent = '';
28                 for (var j = 0; j< jsonReplay[i].level; j++) {
29                     intent += '|-';
30                 }
31                 jsonReplay[i].intent = intent;
32             }
33             $scope.answers[index].replays = jsonReplay;
34         });
35     }
36 });

这里第2行创建一个module, 就是创建一个angular BOOS级的功能模块

第3行和第18行是给这个模块绑定一个处理函数, 函数名字叫 'bbslist', 函数体是一个匿名函数

上边第3行到第16行, 也是可以用的, 只是这种方式, 匿名函数只能接收一个$scope参数,

对比一下18行, 这个方法可以传递多个内置参数, 第18行传递了两个参数, $scope, $http

接下来是html代码:

 1 <!DOCTYPE html>
 2 <html ng-app="bbsApp">
 3 <head>
 4     <meta charset="utf-8">
 5     <script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>
 6     <script src="<?= $baseUrl ?>bbs/js/bbs.js"></script>
 7 </head>
 8     <body ng-controller="bbslist">
 9         <div ng-repeat="answer in answers">
10             <button ng-click="showReplay($index)">查看回复</button>
11             {{answer.id}} => {{answer.nickname}} => {{answer.content}}
12             <div ng-repeat="replay in answer.replays">
13                 {{replay.intent}}{{replay.id}} => {{replay.nickname}} => {{replay.content}}
14             </div>
15         </div>
16     </body>
17     <script type="text/javascript">
18         function getBBSData () 
19         {
20             var jsonBBS = <?= $r ?>;
21             return jsonBBS;
22         }
23 
24         function getBBSUrl()
25         {
26             return "<?= $controllerUrl ?>";
27         }
28     </script>
29 </html>

第2行, ng-app="bbsApp", 就是上边js代码里定义的那个BOOS级的功能的名字

第8行, ng-controller="bbslist", 就是控制器函数啦, 注意, 名字命名, 后边不必写后缀

第9行, ng-repeat, 就是循环(注意循环时, 包括ng-repeat所在的标签), 数据是内置变量$scope里的数据, 我在第20行, 通过PHP给一个变量赋值, 然后再js文件中获取再赋给$scope

第10行, ng-click, 就是点击事件, 那个$index就是ng-repeat时的索引(或下标)

第12行, 又是一个ng-repeat, 他是一个嵌套循环, 显示帖子的回复, 神奇就在这里, 我先写好了repeat程序, 但是并没有数据,

在ng-click绑定的点击事件发生后, (上边js代码22行开始)我动态把数据添加到$scope里, 然后html里的那个repeat程序, 自动就repeat显示了

目录
相关文章
|
数据采集 机器学习/深度学习 数据可视化
ICCV 2023|基于ViT的高效视频识别UniFormerV2开源,K400首次90%准确率!
ICCV 2023|基于ViT的高效视频识别UniFormerV2开源,K400首次90%准确率!
400 0
|
7月前
|
机器学习/深度学习 人工智能 缓存
SepLLM:开源大模型加速神器!400万Token长文本推理提速50%,告别OOM噩梦
SepLLM 是一个用于加速大语言模型的高效框架,通过压缩段落信息并消除冗余标记,显著提高了模型的推理速度和计算效率,适用于长文本处理和多场景部署。
198 7
SepLLM:开源大模型加速神器!400万Token长文本推理提速50%,告别OOM噩梦
|
9月前
|
Python
探索Python虚拟环境:virtualenv、venv与pipenv比较
在Python开发中,有效的环境管理至关重要。virtualenv、venv和pipenv是常用的虚拟环境管理工具。virtualenv支持Python 2.7+和3.3+,可创建独立环境;venv为Python 3.3+内置库,简单轻量但功能有限;pipenv则结合了包管理和虚拟环境管理,生成Pipfile.lock确保依赖确定性和安全性,推荐作为首选工具。
325 2
|
数据安全/隐私保护 Python
Python 解压还密码的压缩文件 LookupError: Couldn't find path to unrar library.
Python 解压还密码的压缩文件 LookupError: Couldn't find path to unrar library.
201 2
|
弹性计算 缓存 网络安全
云服务器 ECS产品使用问题之远程桌面无法连接到Windows实例,该如何排查
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
监控 安全 数据安全/隐私保护
云端智控:智能监控系统的新时代
云上智能监控系统作为一项重要的技术手段,在保障公共安全、提升生产效率等方面发挥着越来越重要的作用。尽管还面临着一些挑战,但随着技术的不断进步和完善,智能监控系统将更加智能化、人性化。未来,我们可以期待更多的技术创新和应用模式出现,让智能监控系统成为智慧城市中不可或缺的一部分。
|
存储 安全 数据安全/隐私保护
DP读书:鲲鹏处理器 架构与编程(九)鲲鹏920处理器片上系统
DP读书:鲲鹏处理器 架构与编程(九)鲲鹏920处理器片上系统
645 0
|
Kubernetes 容器
Kubernetes—安装2022新版ingress-nginx步骤
Kubernetes—安装2022新版ingress-nginx步骤
378 0
|
弹性计算 对象存储 CDN
阿里云服务器带宽计费模式按使用流量怎么收费?
阿里云服务器带宽计费模式按使用流量怎么收费?每GB流量0.8元,地域不同流量单价也不同,如果云服务器带宽使用率低于10%,那么首选按使用流量计费,如果带宽实际利用率较高的话,按固定带宽计费更划算一些
712 0
阿里云服务器带宽计费模式按使用流量怎么收费?
|
前端开发
支持动图、一键生成,基于 React 的开源像素绘画应用 —— Pixel Art to CSS
支持动图、一键生成,基于 React 的开源像素绘画应用 —— Pixel Art to CSS
495 0
支持动图、一键生成,基于 React 的开源像素绘画应用 —— Pixel Art to CSS