行如风Angular初识4-创新互联
学习Angular已经有一段时间了,可以说收获越来越多,上一篇主要说了一下关于数据双向绑定MVVM的问题,今天来说一下Angular的用到的一些关键指令以及它的用法~~
创新互联建站坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。10年网站建设经验创新互联建站是成都老牌网站营销服务商,为您提供网站建设、成都网站制作、网站设计、html5、网站制作、品牌网站设计、小程序制作服务,给众多知名企业提供过好品质的建站服务。1.首先,先说一下ng-app,ng-controller和ng-init;
ng-app是Angular模块初始化的指令,Angular的指令如果要起作用,必须放在对应的ng-app模块内部。
ng-controller是Angular的控制器,通常情况下会和ng-app一起放一个HTML标签里,其他指令也必须放到它的内部。
ng-init是$scope值初始定义的指令作用如下:
在输入框中尝试输入:
你输入的为:{{ firstName }}
2.然后说一下关于内容绑定的指令ng-model和ng-bind和{{内容}}
你输入的为:{{ firstName }}
姓名:
ng-model指令适用于Form表单的value值绑定
ng-bind指令和`XX`适用于其他标签的内容绑定
3.显示和隐藏指令ng-show,ng-hide以及ng-if
我是可见的。
我是不可见的。
我是可见的。(被克隆添加到父元素里)
我是不可见的。(从父元素里删除)
4.重复Html元素ng-repeat,ng-options
ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML元素, ng-repeat 有局限性,选择的值是一个字符串:
你选择的是: `selectedSite`
使用ng-options指令,选择的值是一个对象:
你选择的是: `selectedSite`.`site`
网址为: `selectedSite`.`url`
5.ng-disabled指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
按钮
{{ mySwitch }}
上面的指令是使用Angular会经常用到的指令,仔细的写一遍收获会更大~~~bilibili
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章名称:行如风Angular初识4-创新互联
文章分享:http://myzitong.com/article/djgihg.html