码迷,mamicode.com
首页 > 其他好文 > 详细

行如风 Angular 初识4

时间:2017-04-14 10:43:36      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:angular

学习Angular已经有一段时间了,可以说收获越来越多,上一篇主要说了一下关于数据双向绑定MVVM的问题,今天来说一下Angular的用到的一些关键指令以及它的用法~~

    1.首先,先说一下ng-appng-controllerng-init

    ng-appAngular模块初始化的指令,Angular的指令如果要起作用,必须放在对应的ng-app模块内部。

    ng-controllerAngular的控制器,通常情况下会和ng-app一起放一个HTML标签里,其他指令也必须放到它的内部。

    ng-init$scope值初始定义的指令作用如下:

<divng-app=""ng-init="firstName=‘John‘">
<p>在输入框中尝试输入:</p>
<p>你输入的为:{{ firstName }}</p>
</div>

    2.然后说一下关于内容绑定的指令ng-modelng-bind{{内容}}

<p>你输入的为:{{ firstName }}</p>
<p>姓名:<inputtype="text"ng-model="firstName"></p>
<p ng-bind="firstName"></p>

    ng-model指令适用于Form表单的value值绑定

    ng-bind指令和{{XX}}适用于其他标签的内容绑定

    3.显示和隐藏指令ng-showng-hide以及ng-if

<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<p ng-if="true">我是可见的。(被克隆添加到父元素里)</p>
<p ng-if="false">我是不可见的。(从父元素里删除)</p>
</div>

4.重复Html元素ng-repeat,ng-options

ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML元素, ng-repeat 有局限性,选择的值是一个字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>

使用ng-options指令,选择的值是一个对象:

<select ng-model="selectedSite" ng-options="x.site forx in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

   5.ng-disabled指令

   ng-disabled 指令直接绑定应用程序数据到 HTML disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">点我!</button></p>
<p><input type="checkbox" ng-model="mySwitch">按钮</p>
<p>{{ mySwitch }}</p>
</div>

    上面的指令是使用Angular会经常用到的指令,仔细的写一遍收获会更大~~~bilibili


本文出自 “学习改变命运” 博客,请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1915635

行如风 Angular 初识4

标签:angular

原文地址:http://itzhongxin.blog.51cto.com/12734415/1915635

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!