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

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

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

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

接下来是自己的js代码

 //bbsController

 bbsApp = angular.module('bbsApp',[]);

 // bbsApp.controller('bbslist',['$scope',function($scope) {

 //     $scope.answers= getBBSData();

 //     $scope.bbsUrl = getBBSUrl();

 //     //事件

 //     $scope.showReplay = function(index) {

 //         var id = $scope.answers[index].id;

 //         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;

 //         $http.get(url).success(function(jsonReplay){

 //             var replayData = 'replay_'+id;

 //             $scope.replayData = jsonReplay;

 //         });

 //     }

 // }]);

 bbsApp.controller('bbslist',function($scope, $http) {

     $scope.answers= getBBSData();

     $scope.bbsUrl = getBBSUrl();

     //点击事件

     $scope.showReplay = function(index) {

         var id = $scope.answers[index].id;

         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;

         $http.get(url).success(function(jsonReplay){

             for (i in jsonReplay) {

                 var intent = '';

                 for (var j = 0; j< jsonReplay[i].level; j++) {

                     intent += '|-';

                 }

                 jsonReplay[i].intent = intent;

             }

             $scope.answers[index].replays = jsonReplay;

         });

     }

 });

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

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

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

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

接下来是html代码:

 <!DOCTYPE html>

 <html ng-app="bbsApp">

 <head>

     <meta charset="utf-8">

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

     <script src="<?= $baseUrl ?>bbs/js/bbs.js"></script>

 </head>

     <body ng-controller="bbslist">

         <div ng-repeat="answer in answers">

             <button ng-click="showReplay($index)">查看回复</button>

             {{answer.id}} => {{answer.nickname}} => {{answer.content}}

             <div ng-repeat="replay in answer.replays">

                 {{replay.intent}}{{replay.id}} => {{replay.nickname}} => {{replay.content}}

             </div>

         </div>

     </body>

     <script type="text/javascript">

         function getBBSData ()

         {

             var jsonBBS = <?= $r ?>;

             return jsonBBS;

         }

         function getBBSUrl()

         {

             return "<?= $controllerUrl ?>";

         }

     </script>

 </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显示了

angular.js初探的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  5. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  6. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  7. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

随机推荐

  1. Mongodb副本集搭建经验

    一.环境配置经验 1.一般安装的副本集的时候,主实例可以有数据库和用户:从实例不能.仲裁机不能有任何数据库包括用户 2.搭建副本集的时候Host使用外网IP,否则使用Mongodb VUE 1.6.9 ...

  2. 新浪微博客户端(34)-block的细节与本质

    main.m #import <Foundation/Foundation.h> void test4(); int main(int argc, const char * argv[]) ...

  3. js调用ios的方法

    摘要 在做h5应用的时,有时有些功能js并不能实现的特别完美.比如下载进度条或上传文件进度等.如果能调用ios或者android的方法,实现进度,以及文件上传或者下载列表更好一些.如果使用第三方的js ...

  4. linux下的chm阅读器?

    pre和code标签是可以同时使用的, 通常pre放在code的前面. 由于 code, pre中不能使用 换行, 段落, 和 尖括号标签, 所以, 对于尖括号, 要换成 html的 实体符号 < ...

  5. linux命令--nslookup

    nslookup和dig都是非常有用的网络命令,简单而言,就是查dns信息用的. 本地的dns配置文件在哪里? 文件是:/etc/resolv.conf 打开这个文件:vi /etc/resolv.c ...

  6. virtualbox 中的linux 共享文件 发生文件系统类型错误的解决办法

    转自:http://blog.csdn.net/ls1160/article/details/24913391 最近在研究linux下的安卓源代码编译,遇到了一些问题,在虚拟机的共享文件上. 因为联网 ...

  7. ie8及其以下浏览器的document.getElementsByClassName兼容性问题

    使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许 ...

  8. 【MongoDB】MongoDb的“not master and slaveok=false”错误及解决方法

    链接mongodb报错如下 2016-03-14T16:26:00.912+0800 E QUERY [thread1] Error: listDatabases failed:{ "ok& ...

  9. css 设计总结

    一.背景图片的拉伸: backgroud-size 说明:  http://www.w3school.com.cn/cssref/pr_background-size.asp 效果:  http:// ...

  10. git之常用指令

    参考:Git教程 - 廖雪峰的官方网站 1.git  //linux上检测是否安装git 2.sudo apt-get install git //linux上安装git 3.git config - ...