Angularjs学习笔记《一》
开始慢慢的学习新的框架，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学习笔记《一》的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- sed与正则用法收集
1.将文本每行最后七个字符换成!号 sed -n 's#.\{7\}$#!#p' ooo 在文本的每一行前添加#符号 sed 's/^.\?/#&/' passwd & 替代 ...
- iOS 获取本地文件的各种坑
1.无论:TXT,EPUB,PDF等各种格式的文件,保存到本地的时候,最好都保存成字母或者数字,不要保存成汉字,否则,在取文件的时候,由于编码的问题,各种瓦特 2.如果文件名真的保存成了汉字,那么进行 ...
- 再次写了第一个servlet
费时2小时,熟悉tomcat和编写了第一个servlet
- SQLite存储区的日志模式
目录内包含了三个文件xxx.sqlite.xxx.sqlite-shm.xxx.sqlite-wal 默认的日志模式为Write-Ahead Logging(WAL): 支持多个并发读取和一个并发写入 ...
- Struts框架中struts-config.xml文件配置小结
弄清楚struts-config.xml中各项元素的作用,对于我们构建web项目有莫大的好处.<struts-config>是struts的根元素,它主要有8个子元素,DTD定义 如下: ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- Delphi中String类型原理介绍
Delphi中字符串的操作很简单,但幕后情况却相当复杂.Pascal传统的字符串操作方法与Windows不同,Windows吸取了C语言的字符串操作方法.32位Delphi中增加了长字符串类型,该类型 ...
- thinkphp CURD 1
二.ThinkPHP 3 读取数据 (重点) 对数据的读取 Read $m=new Model('User'); $m=M('User'); select $m-> ...
- Java 页面的工具包
所谓工具包,是指把页面的功能划分出来,放到另外一个包里面.方面工程管理.结构清晰.团队协作等. 根据原来的例子:要做一个com.myweb包的工具包com.myweb.tool 为导航栏统一创建接口 ...
- 建立、配置和使用Activity——Activity
Activity是Android应用中最重要.最常见的应用组件(此处的组件是粗粒度的系统组成部分,并非指界面控件:widget).Android应用的一个重要组成部分就是开发Activity,下 面将 ...