包学习主题的文章列表，还有包学习的技术要点_第274页

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子:点击li中的任意项,被点击的li高亮显示:<!DOCTYPEhtml><htmlng-app><head><title>6.3css类和样式</title><metacharset="utf-8"><script...

代码星球 ·2020-04-04

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名:我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框.错误框的类名是.err,警告框的类名是.warn:<!...

代码星球 ·2020-04-04

angular学习笔记(九)-css类和样式1

本篇主要介绍通过数据绑定来给元素添加特定的类名,从而应用特定的样式从一个最基本的例子来看:<!DOCTYPEhtml><htmlng-app><head><title>6.1css类和样式</title><metacharset="utf-8">&...

代码星球 ·2020-04-04

angular学习笔记(八)-控制视图显示隐藏

本篇介绍angular控制视图的显示和隐藏:通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏:ng-show:绑定的数据值为true时,显示元素,值为false时,隐藏元素ng-hide:绑定的数据值为true时,隐藏元素,值为false时,显示元素(其实只要用到其中一个就可以了)下面来看个...

代码星球 ·2020-04-04

angular学习笔记(七)-迭代3

每个迭代项中还有以下三个变量:$first:判断是否是迭代第一项,如果是,得到true,如果不是,得到false$middle:判断是否迭代中间项(既不是第一项也不是最后一项的都是中间项),如果是,得到true,如果不是,得到false$last:判断是否是迭代最后项,如果是,得到true,如果不是,得到false然后...

代码星球 ·2020-04-04

angular学习笔记(七)-迭代2

视图的迭代和它的ng-repeat属性绑定的数据是实时绑定的,一旦数据发生了改变,视图也会立即更新迭代.还是刚才的那个例子,给它添加一个添加数据按钮和一个删除数据按钮.<!DOCTYPEhtml><htmlng-app><head><title>4.1.迭代</ti...

代码星球 ·2020-04-04

angular学习笔记(七)-迭代1

本篇介绍angular中元素的迭代:<!DOCTYPEhtml><htmlng-app><head><title>4.1.迭代</title><metacharset="utf-8"><scriptsrc="../angular.js">...

代码星球 ·2020-04-04

angular学习笔记(六)-非入侵式javascript

这篇主要讲解非入侵式javascript.在传统的前端开发中,把js写在html中,称为入侵式的javascript:<spanid="select_area"onclick="..."</span>这种做法由于没有把视图和行为分离,而且不易于维护管理,所以已经被淘汰掉.但是,angular通过改进,...

代码星球 ·2020-04-04

angular学习笔记(五)-阶乘计算实例(3)

同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算:<!DOCTYPEhtml><htmlng-app><head><title>2.3.4计算阶乘实例3</title><metacharset="utf-8"&...

代码星球 ·2020-04-04

angular学习笔记(五)-阶乘计算实例(2)

<!DOCTYPEhtml><htmlng-app><head><title>2.3.3计算阶乘实例2</title><metacharset="utf-8"><scriptsrc="../angular.js"></script...

代码星球 ·2020-04-04

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPEhtml><htmlng-app><head><title>2.3.2计算阶乘实例1</title><metacharset="utf-8"><scriptsrc="../angular.js"></script...

代码星球 ·2020-04-04

angular学习笔记(四)- input元素的ng-model属性

input元素的ng-model属性:用于将input的值和变量的值进行双向绑定<!DOCTYPEhtml><htmlng-app><head><title>2.3.1input数据绑定</title><metacharset="utf-8">&l...

代码星球 ·2020-04-04

angular学习笔记(三)-视图绑定数据的两种方式

绑定数据有两种方式:<!DOCTYPEhtml><htmlng-app><head><title>2.2显示文本</title><metacharset="utf-8"><scriptsrc="../angular.js"></s...

代码星球 ·2020-04-04

angular学习笔记(二)-创建angular模块

如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理.他是一个模块.模块有助于把东西从全局命名空间中隔离.今天学习如何自定义创建模块:<!DOCTYPEhtml><html><head><title>2.1模块</titl...

代码星球 ·2020-04-04

angular学习笔记(一)-入门案例

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子:代码如下:<!DOCTYPEhtml><htmlng-app><head><title>1.1实例:购物车</title><metacharset="utf-8">&...

代码星球 ·2020-04-04