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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- leetcode-004 insertion sort list
package leetcode; class ListNode { int val; ListNode next; ListNode(int x) { val = x; next = null; } ...
- 更改Windows Live Writer默认日志与草稿保存路径
目的:把保存Windows Live Writer的日志与草稿文件夹My Weblog Posts移动到E:\Blog\路径下 用mklink命令,创建E:\Blog\路径下的My Weblog Po ...
- UVa 341 - Non-Stop Travel
题目大意:给一个地区的地图,上面有若干路口,每个路口因为红灯的缘故要耽误一些时间,给出起点和终点,找出最短路径使得耽误时间最短. 单源最短路问题,Dijkstra算法.同时还要打印路径. #inclu ...
- 记录一次事故——idea，sbt，scala
没事千万不要点idea的update啊,就算它自己弹出来的也不要管哦. 我们自己的IDE在使用过程中总会有各种settting的配置,更新之后这些都没有了,而且自己本地安装的插件也就都没有了,所以更新 ...
- 安卓自定义类似TabHost的导航栏
有时候为了项目需要我们要自定义一些导航控件,类似下面这样. 下面给大家讲讲我是怎么实现的, 1.素材准备(这个都是美工的事情) 2.①资源文件共有五个 如下: activity_main_first. ...
- Emmet插件详解
http://www.ithao123.cn/content-10512551.html (webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器 [摘要:Emmet的前身 ...
- Flex timer使用 keydown事件注册到stage
Flex timer使用 keydown事件注册到stage: <?xml version="1.0" encoding="utf-8"?> < ...
- EL表达式 requestScope initParam用法
EL表达式 requestScope initParam用法: servlet: package com.stono.servlet; import java.io.IOException; impo ...
- Spring classPath：用法
http://blog.csdn.net/xing_sky/article/details/8228305 参考文章地址: http://hi.baidu.com/huahua035/item/ac8 ...
- vue初探
vue初探 很多同学一定都听过MVVM.组件.数据绑定之类的专业术语,而vue框架正是这样的一种框架.vue的作用是:通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 第一部分:vue介 ...