行如风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值初始定义的指令作用如下：

<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>
<p ng-bind="firstName"></p>

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

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

   3.显示和隐藏指令ng-show，ng-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>
<h2>你选择的是: `selectedSite`</h2>

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

<select ng-model="selectedSite" ng-options="x.site forx in sites">
</select>
<h2>你选择的是: `selectedSite`.`site`</h2>
<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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：行如风Angular初识4-创新互联
链接URL：https://www.cdcxhl.com/article46/djgihg.html

成都网站建设公司_创新互联，为您提供网站建设、关键词优化、网页设计公司、外贸建站、响应式网站、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联