开始慢慢的学习新的框架,Angularjs,其中原理不知深浅,但有例子练习,慢慢熟知。看的英文文档一点点翻译学习。

  第一个例子,写一个增加,选中,删除的例子,

  首先要引进所用的框架源码,这样引进,下面的例子用到了underscorejs:

  

<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/addEle.js"></script>

 

 上html代码:

  

 <body ng-app>
<div ng-controller="addElement"> <h3>共有多少项:{{getLen()}}</h3>
<ul>
<li ng-repeat="el in elents">
<input type="checkbox" ng-model="el.done"> <span class="done-{{el.done}}">{{el.value}}</span>
</li>
</ul> <input type="text" ng-model="setValue" >
<button ng-click="setValueFn(setValue)">add</button><br/> <button ng-click="remove()">remove</button>
</div>
</body>
addEle.js文件代码:
 function addElement ($scope) {

     $scope.elents = [{      //定义数组,在页面中展示

         value:"add elements",
done:false }]; $scope.getLen = function(){
return $scope.elents.length; //计算数组中的长度,实时更新
}; $scope.setValueFn = function(el){
console.log($scope.elents)
$scope.elents.push({value:el,done:false}); //添加项目
$scope.setValue = ""; }; $scope.remove = function(){
$scope.elents = _.filter($scope.elents,function(todo){
return !todo.done; //将选中的过滤干掉
});
};
}

  其中原理不大明白,跟着官网例子练习,再回头阅读其中的工作原理,慢慢熟知整个流程。

  

Angularjs学习笔记《一》的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. 使用idea建立gradle+SSM项目

    目录: 一.创建一个gradle项目   二 .在gradle中创建SSM项目 一 .创建一个gradle项目 第一步: 第二步:选择gradle,并选中web,然后点击Next进入下一步 第三步:此 ...

  2. leetcode--002 rpn

    package leetcode; import java.util.Stack; public class RPN { public static int evalRPN(String[] toke ...

  3. 安装pip工具

    Python 2.7.9+ and 3.4+ Good news! Python 3.4 (released March 2014) and Python 2.7.9 (released Decemb ...

  4. Python3基础 add() 向集合中加入新的元素

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  5. 在ubtuntu中使用包管理器 linux-brew

    用惯了mac的程序员回到linux开发平台总觉得有点不适应,这是因为linux的界面没有mac那么精美,而且linux的包管理器没有mac上面的homebrew那么强大.mac程序员遇到库的依赖问题时 ...

  6. iOS 视图调试器(Debug View Hierarchy) 之 初试牛刀

    参考:http://blog.csdn.net/th_gsb/article/details/44856795 由于iOS的界面开发大多都是用代码实现的,编写的时候,那就是看不见摸不着的情况.所以,如 ...

  7. 创建iwatch 程序选项

    include complication :包含自定义表盘事件 include glance scene:包含缩略图事件

  8. 网站安全配置(Nginx)防止网站被攻击(包括使用了CDN加速之后的配置方法)

    原文链接:http://www.bzfshop.net/article/176.html 网站被攻击是一个永恒不变的话题,网站攻击的方式也是一个永恒不变的老套路.找几百个电脑(肉鸡),控制这些电脑同时 ...

  9. Discuz教程:X3.1-x3.2后台admin.php防止直接恶意访问

    功能说明:admin.php是discuz默认的后台地址,正常情况下可以直接访问,为了防止某些恶意访问的情况,可以修改以下内容进行安全性能提升.适用版本:Discuz!x1-x3.2具体实施方案: a ...

  10. Java:网络编程

    一.因特网地址 InetAddress类:实现主机名和因特网地址之间的转换. InetAddress address=InetAddress.getByName(String);返回一个InetAdd ...