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. Java通过JNI调用C

    Java调用C有多种方式,本文介绍笔者最近的学习过程,避免今后再犯类似的错误. 首先,Java肯定是调用C的动态链接库,即通过编译器编译后的dll/so文件. 下面介绍gcc编译dll的方法. 一般情 ...

  2. 如何运行python

    如何运行Python程序 不少新手朋友遇到的第一个问题,不是Python的数据结构,不是Python的类库使用,更不是第三方模块.框架的应用,而是简单的“如何运行”!Python可用以下三种方式运行, ...

  3. 来聊聊apply和call

    今天在群里讨论的时候,看到有人问apply怎么使用,突然想起自己刚接触这个方法的时候,也是一样的摸不着头脑. 记得当时上网看了很多讲解,可实际用的时候还是感觉有些蒙蒙哒orz.... 后来想一想,也许 ...

  4. 【CISP笔记】操作系统安全

    账号安全设置 默认管理账号Administrator更名,设置密码(字母.数字.大小写字母.特殊字符,长度在8位以上). 本地安全策略 打开方式 win+R 输入ecpol.msc 账号锁定策略 用户 ...

  5. Linux 中常见的命令行，持续更新

    1.添加自己的环境变量 root@adonis:~# echo $PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin r ...

  6. ubuntu安装ssh

    为了解决远程连接ubuntu服务器控制端,方便操作.ubuntu不同的版本安装方式一致!首先在ubuntu服务器下安装SSH服务linux安装命令:sudo apt-get install opens ...

  7. OC第八节——目录操作和文件管理

    1.需要理解的知识            通常程序在运行中或者程序结束之后,需要保存一些信息,而且需要持久化存储信息,比如登陆信息.视频播放记录.收藏记录等等,那么我们可以采用以下几种方式对数据进行持 ...

  8. 使用Oracle ODP.NET 11g的.NET程序发布方法

    使用Oracle ODP.NET 11g的.NET程序发布方法 内容摘要:ODP.NET 11g是Oracle发布的供.NET程序访问Oracle数据库的ADO.NET组件,比微软自带的Oracle组 ...

  9. webpack 教程 那些事儿04-webpack项目实战分析

    这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基 ...

  10. 【转】WordPress转PHPCMS策略-数据库完美转换

    来源:http://www.sjyhome.com/php/wp-to-pc-sql.html WordPress的访问速度不可恭维?那就试试能够生成纯静态的PHPCMS,保证能够让你的网页访问速度有 ...