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是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- jQuery源码学习（1）：整体架构
整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...
- ECSHOP session
ECSHOP session传值 <?phpclass cls_session{ var $session_table = ''; ; // SESSION 过期时间 var $sess ...
- Myeclipse SVN 修改用户名和密码
转自:http://blog.csdn.net/chow__zh/article/details/7731497 解决方案: 在Eclipse使用SVN的过程中大多数人往往习惯把访问SVN的用户名密码 ...
- iOS 错误 之 Potential leak of an object stored into 'cs'
存储到 “cs”的对象存在潜在的泄露
- tomcat 修改网站路径（Java之负基础实战）
1.找到server.xml 在tomcat安装路径/conf/server.xml 2.搜索webapps 添加 <Context path="" docBace=&quo ...
- eclipse修改主题配色
1.Java-->Editor---> Syntax Coloring修改类中的各种代码颜色 2.General-->Editors --->Text Editors
- QT第五天学习
回顾: QFile QTextSream QDataSream QFileInfo QDir Dir entryList 返回目录下所有文件和目录的名字 entryInfoList 返回目录下所有文件 ...
- 如何将lrc歌词文件批量转换为ANSI编码？
有些MP3.MP4或学习机只能播放ANSI编码的歌词文件,可是从网站上下载的歌词大多是UTF-8或者其它机器支持不了的编码,如何批量将这些lrc歌词文件转换成ANSI编码的文件呢? 工具/原料 萍客T ...
- 在ASP.NET MVC中使用JQ插件datatable
1. Models public class Citys { public int Id { get; set; } public string CityName { get; set; } publ ...
- 如何在Visio 2007中画接口和实现类的关系图
http://blog.sina.com.cn/s/blog_53fc9db50100as5o.html 在Visio图形元素上,点击右键,选择“形状显示选项”,将“实现链接”选中,这个时候,类图形元 ...