行如风 Angular 初识4

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

1.首先，先说一下ng-app，ng-controller和ng-init；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.ng-disabled指令

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!