简介
ng指令Angular提供的开箱即用指令，下面这里介绍开发项目中最常用的指令。
ng-model: 模型指令
ng-bind:绑定指令
ng-style:样式指令
ng-switch:选择指令
ng-if/ng-show:判断指令
ng-repeat:循环指令
当然还有很多指令，但是这几个目前是开发中最常用的指令。
详细实例
一、ng-model: 模型指令
1.ng-model取input的值
<div ng-app="" ng-init="text='3.1415926'">
<input type="text" ng-model = "text"/>
<span>{{text}}</span>
<span ng-bind="text"></span>
</div>
2.ng-model单选
<div ng-app="" ng-init="person={sex:true}">
<input type="checkbox" ng-model="person" />
</div>
2.ng-model单选互斥
<div ng-app="" ng-init="person={sex:'male'}">
<input type="radio" name="sex" value="male" ng- model="person.sex"/>
<input type="radio" name="sex" value="female" ng-model="person.sex"/>
</div>
3.ng-model复选操作
<div ng-app="" ng-init={person={like:{iOS:true,Android:false,PHP:true}}}>
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.iOS" />
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.Android">
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.PHP"/>
<div/>
二、ng-bind:绑定指令
<div ng-app="" ng-init="text:"这个是测试文本">
<h1 ng-bind="text"><h1/>
<div/>
三、ng-style:样式指令
<div ng-app="" ng-init="styleObj={background: 'red', width: '100px', height: '100px'}">
<div ng-style="styleObj"><div/>
<div/>
四、ng-switch:选择指令
<div ng-app="">
<select ng-model="selectItem">
<option value="java">java<option/>
<option value="php"><option/>
<select/>
{{selectItem}}
<div ng-switch="selectItem">
<h1 ng-switch-when="java">选择了JAVA<h1/>
<h1 ng-switch-when="php">选择了PHP<h1/>
<h1 ng-switch-default>什么也没选<h1/>
<div/>
<div />
五、ng-if/ng-show:判断指令
<div ng-if="true"><div/>
<div ng-show="true"><div/>
二者区别ng-if当为false是Dom结构移除而ng-show则是单纯的显示和隐藏
六、ng-repeat:循环指令
<div ng-app="" ng-init="array=['2','4','5']">
<ul>
<li ng-repeat="x in array ">{{x}}<li/>
<ul/>
<div/>
以上就是基础指令的基本用法，用心敲代码，加深印象理解。喜欢博主的朋友们关注下点个赞谢谢大家
不积跬步无以至千里,不积小流无以成江海
网友评论