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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- Mybatis3.2.1整合Spring3.1
Mybatis3.2.1整合Spring3.1 根 据官方的说法,在ibatis3,也就是Mybatis3问世之前,Spring3的开发工作就已经完成了,所以Spring3中还是没有对 Mybatis ...
- 从CK+库提取标记点信息
1.CK+动态表情库介绍 The Extended Cohn-Kanade Dataset(CK+) 下载地址 这个数据库是在 Cohn-Kanade Dataset 的基础上扩展来的,发布于2010 ...
- java 类中的属性为什么一般都是私有的
作为一种规范,所有可能被外部访问的可修改变量,都应该有一对对应的getXXX()和setXXX()的存取方法.保证所有对属性值的存取操作,均通过唯一的途径进行. 而我们一般使用private来作这种信 ...
- ios framework 开发 之 实战二 ，成功
1. 新建工程.引入cocoapod略过不提 2. 更改cocoapod类名 这是因为,引用framework的工程中,也有一个同样的文件,及文件里同样的类. 这个文件不能删除,但是可以重命名. 3. ...
- Ubuntu安装飞鸽传输
飞鸽传书下载地址 http://www.ipmsg.org.cn/ipmsg/download.html 下载以后解压压缩包,会有一个可执行文件,executable文件. ./Qipmsg 如果没报 ...
- Chrome Timeline的指标说明：Blocked、Connect、Send、Wait、Receive
Blocked time includes any pre-processing time (such as cache lookup) and the time spent waiting for ...
- java短路问题
java短路问题 短路运算符就是我们常用的"&&"."||",一般称为"条件操作". class Logic{ public ...
- OS X EI Capitan 10.11 & xcode 7.0 beta(7A120f) -- cocoapods安装失败
1.sudo gem install cocoapods: ERROR:While executing gem ... (Errno:EPERM) Operation not permitted - ...
- [oracle]Oracle角色管理
假如我们直接给每一个用户赋予权限,这将是一个巨大又麻烦的工作,同时也不方便DBA进行管理.通过采用角色,使得: 权限管理更方便.将角色赋予多个用户,实现不同用户相同的授权.如果要修改这些用户的权限,只 ...
- VS2013 F12无法转到函数的定义处，总是从“元数据”获取的问题 ——解决方法
右键项目名称-->点击菜单中的"添加"-->点击"引用"-->在弹出窗中点击"解决方案"下的"项目", ...