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为某div下的所有textbox的赋值
html代码 <input type="button" value="变量div_Alltext中的变量" onclick="Do_DivAll ...
- 【bug】java.lang.NoSuchMethodError: android.widget.TextView.setBackground
安卓的背景色设置需要根据SDK的版本来分情况考虑: if (Build.VERSION.SDK_INT >= 16) { textView.setBackground(null); } else ...
- 后端数据库使用 Bomb方案
不再需要阿里云进行部署: http://docs.bmob.cn/ios/faststart/index.html?menukey=fast_start&key=start_ios
- 大话设计模式--委托--IOS
最近看了一些关于IOS委托的文章,看完之后,感觉不大好. 引文: 委托delegation是一种简单但是功能强大的设计模式,它的功能是程序中一个对象代表另一个对象,或者一个对象与另外一个对象协同工作. ...
- 网站环境apache + php + mysql 的XAMPP，如何实现一个服务器上配置多个网站？
xampp 是一个非常方便的本地 apache + php + mysql 的调试环境,在本地安装测试 WordPress 等各种博客.论坛程序非常方便.今天我们来给大家介绍一下,如何使用 XAMPP ...
- iOS 错误 之 Unexpected interface name 'HomeListCell': expected expression
说明:不应该是类HomeListCell:应该是表达式. 出现场景:赋值时,等号右面是个类名,而不是变量名.
- 关于网页显示乱码问题的一些个人见解（PHP、JSP...）
最近做项目,遇到了一些网页显示乱码的情况,在网上查了很多资料都没有给一个全面的准确的答案,自己摸索了一下经过对比开发环境(我使用的是Myeclipse)编辑器的编码和浏览器默认显示的编码发现,在字符编 ...
- LVS 负载均衡解决方案 (windows IIS)
LVS 负载均衡解决方案 因为我们的产品运行的主流平台是WINDOWS+IIS+SQLSERVER(2000以上版本),而LVS+KEEPALIVED是LINUX下的四层负载均衡软件.其有如下特点: ...
- AdapterViewFlipper的功能和用法
AdapterView继承了AdapterViewAnimator,它也会显示Adapter提供的多个View组件,但每次只能显示一个View组件,程序可通过showPrevious和showNext ...
- treegrid.bootstrap使用说明
treegrid.bootstrap使用说明 这个插件是用来做有层次的表格的,大概如图: 官网 http://maxazan.github.io/jquery-treegrid/ 使用这个控件之前需 ...