ng-常用指令

简介

        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/>

---

以上就是基础指令的基本用法，用心敲代码，加深印象理解。喜欢博主的朋友们关注下点个赞谢谢大家

---

                                                                                        不积跬步无以至千里,不积小流无以成江海