angular入门系列教程4
主题:
本篇主要目的就是继续完善home页下的index子页面的内容,处理一个列表,进行增删改查过滤等操作。
效果图:
细节:
主要的更改有两个,一个是修改模板index.html,还有就是增加控制器indexCtl的控制逻辑。
先看模板:
很简单,就是在上边增加了操作区,主要是一个输入框,一个增加按钮,还有就是过滤列表的输入框;下面一个table列表。
先说一个输入框input,咱们使用了ng-model指令,用于把输入框中的内容存储起来,挂在input所在的scope的属性上,当输入框的内容发生改变的时候,对应的scope上的值也就会更改。
然后tr这里,咱们使用了ng-repeat指令,很明显就是造列表的指令,只是他的值里面,咱们增加了过滤器filter,过滤的参数就是冒号后边的filterName;还有ng-if指令,控制渲染或者不渲染的,当表达式执行结果为真,就渲染,否则就不渲染。
还有一个细节就是咱们在“编辑”点击的时候,仅仅切换下了isEditing的值,当值为true的时候,就表示当前处于编辑状态,把编辑状态的输入框显示出来,默认显示的文本隐藏掉,这里用到了ng-show和ng-hide指令,很好理解,当表达式为true的时候show或者hide。
下边来看下indexCtl中就增加了什么东东:
首先,咱们需要数据,从哪里得到,当然是通过ajax请求获得,angular中内置的http服务就是干这样的事情的;当得到数据成功的时候,给scope的items赋值。
还有一个就是当点击增加按钮的时候,执行的函数addNewItem,其实只需要给items数组push一个新的对象即可,在页面表现上就会自动渲染好新增加的项。
相应的删除,同理也是一样的,只需要把items数组这的这一项删除掉即可。
结束语:
增删改查,简单已经完成,而咱们在控制器中基本没写什么代码,下一篇继续完善。
本篇源码:https://github.com/dolymood/angular-example/tree/ls_4
欢迎吐槽
angular入门系列教程4的更多相关文章
- angular入门系列教程目录
本系列教程的目标很明确,就是入门,会一步一步的从零到最终的能写出一个基本完整的应用.这个过程中不去纠结一些概念或者是如何实现等等深入的东西,只是停留在应用层. ps:如果条件允许的话,后续会有深入一点 ...
- angular入门系列教程3
主题: 本篇主要目的就是继续完善home页,增加tab导航的三个页index index1 index2 效果图: 细节: 初始化的JS就是咱们的home.js,仔细来看. angular的route ...
- angular入门系列教程2
主题: 本篇主要介绍下angular里的一些概念,并且在咱们的小应用上加上点料.. 概念(大概了解即可,代码中遇到的会有详细注释): 模板:动态模板,是动态的,直接去处理DOM的,而不是通过处理字符串 ...
- angular入门系列教程1
主题: 一个能够跑起来的页面,神奇的效果,无需一样JS代码! 效果图: 细节: 当然,这里甚至连登陆都没做,只是看到神奇的当输入用户名或者密码的时候,下面的预览区域也会有相应的更改.没有一行的JS代码 ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- ASP.NET MVC 入门系列教程
ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...
随机推荐
- sql Truncate 与 delete的区别
Truncate 语法 TRUNCATE TABLE [ { database_name .[ schema_name ] . | schema_name . } ] table_na ...
- 关于windows的svchost进程的问题(年代有点久远)
这是N年前写的一篇关于svchost的blog,虽然写的不好却是我第一次写的技术类blog, 发上来做开博第一篇吧. ***************************************** ...
- OSPF多区域配置
1.配置三台路由器IP R1(config)#INTER S1/0 R1(config-if)#IP ADDress 192.1.12.1 255.255.255.0 R1(config-if)#no ...
- 10款很酷的HTML5动画和实用的HTML5应用
1.HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击 ...
- 6款基于SVG的HTML5应用和动画
1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...
- ASCII 码表
下面的 ASCII 码表包含数值在0-127之间的字符的十进制.八进制以及十六进制表示. 十进制 八进制 十六进制 字符 描述 0 0 00 NUL 1 1 01 SOH start of hea ...
- HIV T2
甲学者将HIV病毒的遗传物质彻底水解后得到A.B.C三种化合物,乙学者将组成T2噬菌体的遗传物质彻底水解后得到了A.B.D三种化合物.你认为C.D两种化合物分别指的是 A.尿嘧啶.胸腺嘧啶 B.胸腺嘧 ...
- hidden(隐藏域)
<input type="hidden">? 这等于是隐藏值,客户端无需显示,但提交后后台能够接受,例如你放个表单验证值在里边,这样可以拒绝来源不明的表单提交.还有判断 ...
- 《搭建DNS内外网的解析服务》RHEL6
首先说下: 搭建的这个dns内外网的解析,是正向解析,反向解析自己根据正向解析把文件颠倒下就ok了 第一步我们先搭建一个DNS的正反向解析(参考上篇DNS正反向解析,这是上篇做过的) 第二部才是搭建内 ...
- Unity学习笔记(4):依赖注入
Unity具体实现依赖注入包含构造函数注入.属性注入.方法注入,所谓注入相当赋值,下面一个一个来介绍 1:构造函数注入 1.1当类有多个构造函数时,可以通过InjectionConstructor特性 ...