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. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  2. NSOperation GCD 对比 (附NSOperation演练)

    项目中使用NSOperation的优点是NSOperation是对线程的高度抽象,在项目中使用它,会使项目的程序结构更好子类化NSOperation的设计思路,是具有面向对象的优点(复用.封装),使得 ...

  3. 代码中access 的使用

     C++代码:if(access(strZip.c_str(), 0) == 0){...}    此处为判断strZip中文件是否存在   .c_str() 是他自身字符串名称,该名称是一个压缩文件 ...

  4. shell学习之路:流程控制(if)

    1.单分支if条件语句 if [ 条件判断式 ];then 程序 fi 或者 if [ 条件判断式 ] then 程序 fi 注意事项: 1.if语句使用fi结尾,和一般语言使用大括号结尾不同 2.[ ...

  5. jQuery回调、递延对象总结（上篇）—— jQuery.Callbacks

    前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...

  6. javascript简单的认识下return语句+2015的总结+2016的展望

    好久没更新博客了...自从有了mac之后世界变得简单了...日常么,除了研究代码,看别人的代码,写自己的代码.就那样.... 吐槽点:window配个nodejs的环境花了九头牛两只老虎的力气,mac ...

  7. fileUpload1.HasFile的返回值永远都是false的问题处理

    在aspnet项目中,如果有页面使用了fileupload,不巧你也在此页面使用了updatepanel局部刷新控件,那马就会出现一个很奇怪的问题:就是不管你选择文件了没有,fileUpload1.H ...

  8. 【python网络编程】使用rsa加密算法模块模拟登录新浪微博

    一.基础知识 http://blog.csdn.net/pi9nc/article/details/9734437 二.模拟登录 因为上学期参加了一个大数据比赛,需要抓取数据,所以就想着写个爬虫抓取新 ...

  9. CK-Editor content.replace

    <s:property value="content.replace('\n\r', '<br/>')" escape="false"/> ...

  10. HNU 12885 Bad Signal（模拟）

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12885&courseid=274 解题报告:一共有n个 ...