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. iOS- storyboard this class is not key value coding-compliant for the key xxx

    如图: 在使用storyboard的时候出现此问题,主要是因为给storybroad中的view拖线的时候,有时不小心线拖错了,或者再次拖线导致代码中控件的名字与之前拖线时定义的名字不同导致的. 解决 ...

  2. [MongoDB]可视化工具Robomongo

    摘要 习惯了可视化的管理数据的方式,通过敲命令,确实有些不自在.这里推荐一个mongodb的可视化工具——Robomongo 相关文章 [MongoDB]入门操作 [MongoDB]增删改查 [Mon ...

  3. linux下的chm阅读器?

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

  4. CF456B Fedya and Maths 找规律

    http://codeforces.com/contest/456/problem/B CF#260 div2 B Fedya and Maths Codeforces Round #260 B. F ...

  5. vmstat、top

    vmstat是一个查看虚拟内存(Virtual Memory)使用状况的工具,使用vmstat命令可以得到关于进程.内存.内存分页.堵塞IO.traps及CPU活动的信息. vmstat 最常用的有两 ...

  6. ConcurrentHashMap-----不安全线程hashmap-安全线程-hashtable

    JDK1.0引入了第一个关联的集合类HashTable,它是线程安全的.HashTable的所有方法都是同步的.JDK2.0引入了HashMap,它提供了一个不同步的基类和一个同步的包装器synchr ...

  7. Kali Linux中MySQL重置root密码

    参考:使用mysqladmin命令修改MySQL密码与忘记密码 前言:(在Windows的DOS命令行下和在kali Linux下修改方法是一样的)在kali Linux中默认安装了MySQL的最新版 ...

  8. flask 知识点总结

    ============================request对象的常用属性============================具体使用方法如下:request.headers, requ ...

  9. seo是什么职业

    SEO(Search Engine Optimization)汉译为搜索引擎优化.seo从业者首要工作就是优化网站,使其符合搜索引擎的基本规律和满足用户的需求,进而获得大量的用户访问.SEO职业属于一 ...

  10. 湖南附中模拟day1 金坷垃

    题意描述"没有金坷垃,怎么种庄稼?"花花家有一块田,所有庄稼排成了 N 行 M 列.初始时,每棵庄稼都有一个自己的高度hi;j.花花每次可以使用 1mol 的金克拉使一棵庄稼的高度 ...