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. 在linux命令行中直接执行php命令

    有时候用浏览器调试太麻烦,想在linux命令下直接执行php代码 php -r 'echo 0500;'

  2. 如何去各型MCU的官网上下载正确的数据手册

    一.背景 感谢老司机左栋,虽然他一直很排斥这个名号 : ) ,可就技术上来说,还是当之无愧的. 弄了1年多单片机了,数据手册不是老员工或者头头给,就是从开发板资料拿.一直没有意识到,官网的东西才是最可 ...

  3. 如何在CentOS 6.5上安装EPEL 源

    EPEL 是什么? EPEL (Extra Packages for Enterprise Linux,企业版Linux的额外软件包) 是Fedora小组维护的一个软件仓库项目,为RHEL/CentO ...

  4. MFC关闭子窗口 如何把父窗口也一起关闭

    在子窗口OnClose() 消息里添加: GetParent()->DestroyWindow();//子窗口关闭 父窗口也同样关闭

  5. LVS NAT模式

    LVS-NAT 三台虚拟机都是centos 6.5 关闭防火墙和selinux 角色 IP地址 备注 LVS负载调度器 eth0:192.168.119.128(内网) eth1:192.168.94 ...

  6. NOSQL的学习

    NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",指的是非关系型的数据库.NoSQL用于超大规模数据的存储.(例如谷歌或Facebook每天为他们的 ...

  7. DOM之操作技术

    1.1 动态脚本 动态加载的外部JS文件能够立即运行.难点在于如何知道脚本加载完成了?可以通过事件来检测.IE对待<script>元素特殊性,不允许DOM访问其子节点.使用元素的text属 ...

  8. hiho #1361 Playfair密码表

    题目1 : Playfair密码表 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho经常用Playfair密码表加密自己的代码. 密码表是按以下步骤生成的. ...

  9. Android活动管理工具

    ActivityCollector.java import android.app.Activity; import java.util.ArrayList; import java.util.Lis ...

  10. linux kernel 杂谈

    首先介绍一下背景吧,工作三个星期了．复习了一波u-boot,跟了一下事件上报,搞了下平台设备,扣了一个内存检查代码． 想想生活是不是有点无聊．对啊,真的很无聊!!!! 无聊也没有办法啊,所以找点方法去 ...