源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angularjs结合Bootstrap制作的一个TODO List

  • 时间:2021-03-05 03:08 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angularjs结合Bootstrap制作的一个TODO List
看了一个关于Angularjs的视频,视频内容讲解的是如何制作一款TODO list形式的SPA(Simple Page Application,单页面应用)。为了增强理解,下面写了一篇文章,用以复习巩固。 [b]准备[/b] [b]Angularjs下载[/b] 说是下载,其实只要能在我们的页面中引用到Angularjs即可。可以有如下方式。 [b]CDN加速[/b] 使用国内的CDN加速服务也是可以的。
[url=http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css]
页面效果 [img]http://files.jb51.net/file_images/article/201608/201681893840023.gif?201671893850[/img] [b]代码详解[/b] 代码中最外边包裹的一层代码可以很好的起到临时空间的效果,防止命名空间的污染。
(function(window){
 // to do something
})(window)

注意最后面的(window)不可缺少。  [b]创建应用[/b] // 注册一个应用程序主模块 var todoapp = window.angular.module('todoapp',[]); [b]创建控制器[/b]
todoapp.controller('maincontroller'
 // 这里的$scope也就起到了容器的作用,声明了变量的可见范围。
  ,['$scope',function($scope){
   // $scope 作用就是往视图中添加元素
   // 文本框中的数值
   $scope.text = ''; // 会使用双向绑定的数据类型

   // 为方便页面展示,手动添加一串列表
   $scope.todolist = [{
    text:'Angularjs',
    done:false
   },{
    text:'Bootstrap',
    done:false
   }];


 }]);

完善功能函数
// 添加函数,响应交互
   $scope.add = function(){
    var text = $scope.text.trim();
    if(text) {
     $scope.todolist.push({
      text:text,
      done:false
     });
     $scope.text = '';
    }
   }

   // 点击删除按钮的响应事件
   $scope.delete = function(todo){
    var index = $scope.todolist.indexOf(todo)
    $scope.todolist.splice(index,1);// 起删除的作用
   }


   // 获取已完成的事件的个数,按照checkbox的选择与否实现
   // 由于页面是动态变化的,所以要使用函数,或者干脆使用模型绑定,但是那样的话会稍微麻烦一点
   $scope.doneCount = function(){
    // 使用filter来实现
    var temp = $scope.todolist.filter(function(item){
     return item.done;// 返回true表示当前的数据满足条件,事件已完成
    });
    return temp.length;
   }

[b]总结[/b] 代码不多,思想很深邃。 如果大家还想深入学习,可以点击这里[/url]进行学习,再为大家附3个精彩的专题: [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部