2、angular指令

一、ng-app

    1、定义和用法

    ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。

    所有 AngularJS 应用都必须要要一个根元素。

    HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

     2、语法

<element ng-app="modulename">
...
在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>
所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body ng-app="">

    <p>我的第一个表达式: {{ 5 + 5 }}</p>

</body>
</html>

 

二、ng-bind

    1、定义和用法

    ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

    如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。

    2、语法

 <element ng-bind="expression"></element>
 或作为 CSS 类：
 <element class="ng-bind: expression"></element>
 所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="personal=[1,2,3,4,5]">
        <span ng-bind="personal[0]"></span>  
        <span class="ng-bind:personal[1]"></span>  
    </div>
</body>
</html>

 三、ng-bind-html

    1、定义和用法

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML，你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块，使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

    2、语法

<element ng-bind-html="expression"></element>
所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-sanitize/1.6.6/angular-sanitize.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <span ng-bind-html="name">
            
            </span>
        </div>
    </div>
</body>
</html>
<script>
    var app = angular.module('app',['ngSanitize'])
        app.controller('myController',function($scope){
        $scope.name = "<h1>nihao<h1>"
    })
</script>
nihao

    4、ng-bind和ng-bind-html区别

    ng-bind-html不安全的不显示

    ng-html全部显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-sanitize/1.6.6/angular-sanitize.min.js"></script>
</head>
<body>
<div ng-app="app" >
    <div ng-controller="myController">
        <span ng-bind-html="name1"></span>
        <span ng-bind="name2"></span>
    </div>
</div>
</body>
</html>
<script>
var app = angular.module('app',['ngSanitize'])
    app.controller('myController',function($scope){
    $scope.name1 = '<script>console.log(111)<script>'
    $scope.name2 = '<script>console.log(222)<script>'
})
</script>
<script>console.log(222)<script>

 四、ng-bind-template

     1、定义和用法

    ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。

    当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template 指令。

    2、语法

    <element ng-bind-template="expression"></element>

      所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-sanitize/1.6.6/angular-sanitize.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <span ng-bind-template="{{firstname}}{{lastname}}"></span>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',function($scope){
    $scope.firstname="zhang"
    $scope.lastname="wang"
})
</script>
zhangwang

五、ng-blur

    

    1、定义和用法

            ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。

            AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件， 如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。

        2、语法

        <element ng-blur="expression"></element>

            <a>, <input>, <select>, <textarea>,窗口对象支持。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <input type="text" ng-blur="blurFun()">
            <span>{{count}}</span>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',function($scope){
    $scope.count = 0
    $scope.blurFun = function(){
        $scope.count++
    }
})
</script>

 

六、ng-change

   1、定义和用法

        ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

        ng-change 指令需要搭配 ng-model 指令使用。

        AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

        ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

        ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

    2、语法

        <element ng-change="expression"></element>

          <input>, <select>, 和  <textarea> 元素支持。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <input type="text" ng-change="changeFun()" ng-model="myValue">
            <span>{{count}}</span>
            <button ng-click="clickFun()">不会通过js触发ng-change</button>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.count = 0
    $scope.myValue = 0
    
    $scope.changeFun = function(){
        $scope.count++
    }
    $scope.clickFun = function(){
        $scope.myValue--
    }
}])
</script>

 

七、ng-checked

       1、定义和用法

            ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

            如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

    2、语法

            <input type="checkbox|radio" ng-checked="expression"></input>

            type 为 checkbox 或 radio 的 <input> 元素支持。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <input type="checkbox" ng-model="all">全选<br>
            <input type="checkbox" ng-checked="all"><br>
            <input type="checkbox" ng-checked="all"><br>
            <input type="checkbox" ng-checked="a">false<br>
            <input type="checkbox" ng-checked="b">true
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.a = false
    $scope.b = true
}])
</script>

八、ng-class

   1、定义和用法

            ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

            ng-class 指令的值可以是字符串，对象，或一个数组。

            如果是字符串，多个类名使用空格分隔。

            如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

            如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

        2、语法

            <element ng-class="expression"></element>

            所有的 HTML 元素都支持。

          3、实例

        1种、字符串数组形式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
            <button ng-click="clickFun()">点击切换</button>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.isActive = true
    $scope.clickFun = function(){
        $scope.isActive=!$scope.isActive
    }
}])
</script>

    2种、key：value

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <div ng-class="{red: isActive,blue:true}"></div>
            <button ng-click="clickFun()">点击切换</button>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.isActive = true
    $scope.clickFun = function(){
        $scope.isActive=!$scope.isActive
    }
}])
</script>

3种、字符串形式（不推荐使用）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" >
        <div ng-controller="myController">
            <div ng-class="textType"></div>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.textType = "red"
}])
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
    color:white;
    
    padding:20px;
    font-family:"Courier New";
}
.tomato {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
</head>
<body ng-app="">

<p>选择一个类:</p>

<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>

<div ng-class="home">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

</body>
</html>

九、ng-class-even 和 ng-class-odd

    1、定义和用法

    ng-class-even 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于偶数行。

    ng-class-even 指令需要与 ng-repeat 指令搭配使用。

    ng-class-even 指令建议用在表格的样式渲染中，但是所有HTML元素都是支持的。

  2、语法

    <element ng-class-even="expression"></element>

    所有 HTML 元素都支持。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<style>
.red{
    color:red
}
</style>
<body>
    <div ng-app="app" ng-controller="myController">
        <table>
                                                <!--注意单引号-->
            <tr ng-repeat="x in records" ng-class-even="'red'">
                <td>{{x.Name}}</td>
                <td>{{x.Country}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.records = [
    {
    "Name" : "Alfreds Futterkiste",
    "Country" : "Germany"
    },
    {
    "Name" : "Berglunds snabbk",
    "Country" : "Sweden"
    },
    {
    "Name" : "Centro comercial Moctezuma",
    "Country" : "Mexico"
    },
    {
    "Name" : "Ernst Handel",
    "Country" : "Austria"
    }
    ]
}])
</script>

十、ng-click

      1、定义和用法

            ng-click 指令告诉了 AngularJS HTML 元素被点击后需要执行的操作。

   2、语法

        <element ng-click="expression"></element>

          所有 HTML 元素都支持。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <button ng-click="count= count+1" ng-init="count=0">点击</button>
        <span>{{count}}</span>
        </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

    十一、ng-cloak 防止页面闪烁防止显示{{}}

     1、定义和用法

    ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

    AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。

    2、语法

    <element ng-cloak></element>

    所有 HTML 元素都支持。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-cloak>
            {{5+5+5}}
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

十二、ng-controller

           1、定义和用法

                ng-controller 指令用于为你的应用添加控制器。

                在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

     2、语法

            <element ng-controller="expression"></element>

                所有 HTML 元素都支持。

            3、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        {{firstName+''+lastName}}
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.firstName = 'zhang'
    $scope.lastName = 'san'
}])
</script>

 

十三、ng-copy

      1、定义和用法

        ng-copy 指令用于告诉 AngularJS 在 HTML 元素文本被拷贝时要执行的操作。

        ng-copy 指令不会覆盖元素的原始 oncopy 事件, 事件触发时，ng-copy 表达式与原始的 oncopy 事件将都会执行。

    2、语法

        <element ng-copy="expression"></element>

         所有 HTML 元素都支持。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-copy="count=count+1" ng-init="count=0">
        <span>{{count}}</span>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

 十四、ng-csp

    1、定义和用法

        ng-csp 指令用于修改 AngularJS 的安全策略。

        如果使用了 ng-csp 指令， AngularJS 将不会执行eval 函数，这样就无法注入内联样式。

        设置 ng-csp 指令为 no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数，但允许注入内联样式。

        设置 ng-csp 指令为 no-inline-style, 将阻止 AngularJS 注入内联样式，但允许 执行 eval 函数。

        如果开发 Google Chrome 扩展或 Windows 应用 ng-csp 指令是必须的。

        注意:ng-csp 指令不会影响 JavaScript,但会修改 AngularJS 的工作方式，这就意味着: 你仍然可以编写 eval 函数, 且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式，会降低 30% 的性能。

    2、语法

    <element ng-csp="no-unsafe-eval | no-inline-style"></element>

    3、参数值

值描述
no-unsafe-eval
no-inline-style		 值可设置为空，意味着 eval 和 内联样式都不被允许。
可以设置其中一个值。
你也可以同时设置两个值使用分号隔开，但这与留空的效果是一样的。
   

        4、实例

 

十五、ng-cut

    1、定义和用法

            ng-cut 指令用于告诉 AngularJS 在剪切 HTML 元素的文本时需要执行的操作。

            ng-cut 指令指令不会覆盖元素的原始 oncut 事件, 事件触发时，ng-cut 表达式与原始的 oncut 事件将都会执行。

     2、语法

            <element ng-cut="expression"></element>

               <a>, <input>, <select>, <textarea>, 及窗口对象都支持该指令

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-cut="count=count+1" ng-init="count=0">
        <span>{{count}}</span>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

 

十六、ng-dblclick

    1、定义和用法

            ng-dblclick 指令用于告诉 AngularJS 在鼠标鼠标 HTML 元素时需要执行的操作。

            ng-dblclick 指令不会覆盖元素的原始 ondblclick 事件, 鼠标双击时，ng-dblclick 表达式与原始的 ondblclick 事件将都会执行。

    2、语法

        <element ng-dblclick="expression"></element>

         所有 HTML 元素都支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <h1  ng-dblclick="count = count + 1" ng-init="count=0">asdas<h1>
        <span>{{count}}</span>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

十七、ng-disabled

     1、定义和用法

            ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

            如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

    2、语法

            <input ng-disabled="expression"></input>

               <input>, <select>, 和 <textarea> 元素都支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
    <input type="checkbox" ng-model="all">
    <input type="text" ng-disabled="all">
    <input type="text" ng-disabled="all">
    <select ng-disabled="all">
        <option >1</option>
        <option >2</option>
    </select>
    <button ng-click="all=!all">点击</button>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.all = true
}])
</script>

十八、ng-focus

    1、定义和用法

        ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

        ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。

    2、语法

        <element ng-focus="expression"></element>

        <a>, <input>, <select>, <textarea>, 和 window 对象都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
    <input  ng-focus="count = count + 1" ng-init="count=0"/>
    <span>{{count}}</span>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

十九、ng-form

Form 表单

在开始看angularjs如何处理表单前， 我们先想想处理表单时可能遇到的问题

  1. 如何数据绑定

  2. 验证表单element e.g. input select etc

  3. 显示出错信息

  4. 整个Form的验证

  5. 避免提交没有验证通过的表单

  6. 如果防止多次提交

form

如果我们引用了anuglajs， 在一个controller的scope下写了一个HTML的form， 其实我们已经在使用 angularjs 的 form directive 了。

下面两种html的写法都会调用 angularjs 的form directive, 并且可以用myForm引用这个 form， 来判断表单是否验证通过。

<form name="myForm"></form><ng-form name="myForm"></ng-form>

bind model 如何双向绑定

用 ng-model。 下面的代码把controler scope下的person的name和一个叫做 personName input 绑定到了一起

<form>
  <input name="personName" ng-model="person.name"/></form>

valid field 验证表单element, 显示出错信息

这里分两部分， 第一部分是angular自带的验证器， 另一部分是自己实现的验证器。 这里只介绍第一种情况。 第二个会在单独的文章里描述。

angularjs 自带了一些html5的验证， 比如： 必填项、email、url （到1.0.7）其实只有这 三个 !!!^ ^

用法一如既往的简单， 都是声明式的. 下面我们定义了一个input，名字叫做 personEmail， 要求必须有输入，而且输入的必须是一个email. 通过变量

    myForm.personEmail.$valid

我们可以判定这个input的输入是否合法， 从而决定是否显示出错信息。

具体是那类错误可以通过

    myForm.personEmail.$error

用法如下：

<form name="myForm">
  <input name="personEmail" required type="email" ng-model="person.email"/>
  <span ng-show="!myForm.personEmail.$valid">有错</span>
  <span ng-show="myForm.personEmail.$error.required">必填</span>
  <span ng-show="myform.personEmail.$error.email">email 地址不对</span></form>

form是否通

form.$invalid

用这个值可以控制提交按键的状态， 值允许valid的form可以提交.

<form name="myForm" ng-submit="save()">
  <input name="personEmail" required type="email" ng-model="person.email"/>
  <span ng-show="!myForm.personEmail.$valid">有错</span>
  <span ng-show="myForm.personEmail.$error.required">必填</span>
  <span ng-show="myform.personEmail.$error.email">email 地址不对</span>
  <input name="personName" required/>

  <input type="submit" ng-disabled="myForm.$invalid"/></form>

提交的方法， 我们通过ng-submit 绑定到了controller里的save函数上。

form的简单使用就是这样了

注意

在至少1.0.7下， input form的名字要用驼峰， 否者有问题。

实例、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
<form name="myForm">
<input name="personEmail" required type="email" ng-model="person.email"/>
<span ng-show="!myForm.personEmail.$valid">有错</span>
<span ng-show="myForm.personEmail.$error.required">必填</span>
<span ng-show="myform.personEmail.$error.email">email 地址不对</span>
</form>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
}])
</script>

二十、ng-hide

    1、定义和用法

        ng-hide 指令在表达式为 true 时隐藏 HTML 元素。

        ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。

    2、语法

        <element ng-hide="expression"></element>

        作为 CSS 类使用:

        <element class="ng-hide"></element>

        所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
    <div ng-hide="true">111111</div>
    <div ng-hide="false">222222</div>
    <div class="ng-hide">3333333</div>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

二十一、ng-href

    1、定义和用法

        ng-href 指令覆盖了原生的 <a> 元素 href 属性。

        如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而不是 href。

        ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。

    2、语法

        <a ng-href="string"></a>

        <a> 元素支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <a ng-href="{{a}}">{{a}}</a>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.a = 'http://www.baidu.com'
}])
</script>

二十二、ng-if

    1、定义和用法

        ng-if 指令用于在表达式为 false 时移除 HTML 元素。

        如果 if 语句执行的结果为 true，会添加移除元素，并显示。

        ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

    2、语法

        <element ng-if="expression"></element>

        所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="checkbox" ng-model="my">
        <div ng-if="my">显示隐藏1</div>
        <div ng-if="a">显示隐藏2</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.a = true
}])
</script>

二十三、ng-include

    1、定义和用法

        ng-include 指令用于包含外部的 HTML 文件。

        包含的内容将作为指定元素的子节点。

    ng-include 属性的值可以是一个表达式，返回一个文件名。

        默认情况下，包含的文件需要包含在同一个域名下。

    2、语法

        <element ng-include="filename" onload="expression" autoscroll="expression" ></element>

        ng-include 指令作为元素使用:

        <ng-include src="filename" onload="expression" autoscroll="expression" ></ng-include>

        所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
                    <!--注意单引号-->
    <div ng-include="'/a.html'"></div>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

二十四、ng-init

    1、定义和用法

        ng-init 指令执行给定的表达式。

        ng-init 指令添加一些不必要的逻辑到 scope 中，建议你可以在控制器中 ng-controller 指令执行它 。

    2、语法

        <element ng-init="expression" ></element>

        所有的 HTML 元素都支持该指令。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-init="name='zhangsan'">
            {{name}}
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

二十五、ng-jq

二十六、ng-keydown 、ng-keypress、ng-keyup

    1、定义和用法

        ng-keydown 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。

        ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，ng-keydown 表达式与原生的             onkeydown 事件将都会执行。

        按键敲击的事件顺序:

    1. Keydown

    2. Keypress

    3. Keyup

    2、语法

        <element ng-keydown="expression"></element>

          <input>, <select>, <textarea>, 和其他可编辑元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-keydown="count=count+1">
        <span>{{count}}</span>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

二十七、ng-list

    1、定义和用法

                ng-list 指令将字符串转换为数组，并使用逗号分隔。

                ng-list 指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用 ng-list 指令。

        ng-list 属性值定义了分隔符。

      2、语法

            <element ng-list="separator"></element>

            <input>, <select>, <textarea>, 和其他可编辑元素支持该指令。

    3、参数值

值描述
separator 可选,定义分隔符，默认为", "

    4、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-list='.' ng-model="count">
        <span>{{count}}</span>
        <div ng-repeat="x in count">
            序号为：{{x}}
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.count=[1,2,3,4,5]
}])
</script>

二十八、ng-model

    1、定义和用法

        ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

        如果 scope 中不存在变量, 将会创建它。

    2、语法

        <element ng-model="name"></element>

        <input>, <select>, <textarea>, 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-model="count">
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.count='zhang'
}])
</script>

二十九、ng-model-options

1、定义和用法

ng-model-options 指令绑定了 HTML 表单元素到 scope 变量中

你可以指定绑定数据触发的时间，或者指定等待多少毫秒，参数设置可以参考以下说明。

2、语法

<element ng-model-options="option"></element>

<input>, <select>, <textarea>, 元素支持该指令。

3、参数值

 

值描述
option 指定了绑定数据的规则，规则如下:

{updateOn: 'event'}规则指定事件发生后绑定数据

{debounce : 1000} 规定等待多少毫秒后绑定数据

{allowInvalid : true|false} 规定是否需要验证后绑定数据

{getterSetter : true|false} 规定是否作为 getters/setters 绑定到模型

{timezone : '0100'} 规则是否使用时区

4、实例

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <!--在失去焦点后变量name才会改变-->
        <input ng-model="name" ng-model-options="{updateOn: 'blur'}">
        <!--在1秒后后变量name才会改变-->
        <input ng-model="name" ng-model-options="{debounce : 1000}">
        <div>名字是：{{name}}</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.name='zhang'
}])
</script>

三十、ng-mousedown  、ng-mouseenter  、ng-mouseleave 、 ng-mousemove 、ng-mouseover  、ng-mouseup   

 1、定义和用法

        ng-mousedown 指令用于告诉 AngularJS 鼠标在指定的 HTML 元素上按下时要执行的操作。

        ng-mousedown 指令不会覆盖元素的原生 onmousedown 事件, 事件触发时，ng-mousedown 表达式与原生的 onmousedown 事件将都会执行。

        鼠标点击执行的顺序:

    1. Mousedown

    2. Mouseup

    3. Click

    2、语法

        <element ng-mousedown="expression"></element>

         所有的 HTML 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-mousedown="count=count+1">
            数字是： {{count}}
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

 三十一、ng-non-bindable

    1、定义和用法

              ng-non-bindable 指令用于告诉 AngularJS 当前的 HTML 元素或其子元素不需要编译。

    2、语法

            <element ng-non-bindable></element>

                所有的 HTML 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-non-bindable>{{name}}</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.name="zhang"
}])
</script>

三十二、ng-open

    1、定义和用法

                ng-open 指令用于设置 details 列表的 open 属性。

                如果 ng-open 的表达式返回 true 则 details 列表是可见的。

    2、语法

                <details ng-open="expression">...</details>

                    <details> 元素支持该指令。

         3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="checkbox" ng-model="showDetails">
        <details ng-open="showDetails">
            <summary>学的不只是技术</summary>
            你好啊111
        </details>  
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

三十三、ng-options

    1、定义和用法

            ng-options 指令用于使用 <options> 填充 <select> 元素的选项。

            ng-options 指令使用数组来填充下拉列表，多数情况下与 ng-repeat 指令一起使用。

    2、语法

            <select ng-options="array expression"></select>

                <details> 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <select ng-model="selectName" ng-options="item for item in name">
        
        </select>
        <div>{{selectName}}</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.name=['a','b','c']
}])
</script>

三十四、ng-paste

    1、定义和用法

        ng-paste 指令用于告诉 AngularJS 文本在 HTML 元素上粘贴时需要执行的操作。

        ng-paste 指令不会覆盖元素的原生 onpaste 事件, 事件触发时，ng-paste 表达式与原生的 onpaste 事件将都会执行。

    2、语法

        <element ng-paste="expression"></element>

        <input>, <select>, <textarea> 及其他可编辑元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-paste="count=count+1">
        <div>{{count}}</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.name=['a','b','c']
}])
</script>

三十五

ng-pluralize

三十六、ng-readonly

    1、定义和用法

                ng-readonly 指令用于设置表单域(input 或 textarea) 的 readonly 属性。

                如果 ng-readonly 属性的表达式返回 true 则表单域为只读。

    2、语法

            <input ng-readonly="expression"></input>

                <input> <textarea> 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="checkbox" ng-model="all">
        <input type="text" ng-readonly="all">
        <input type="text" ng-readonly="all">
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    
}])
</script>

三十七、ng-repeat

1、定义和用法

            ng-repeat 指令用于循环输出指定次数的 HTML 元素。

            集合必须是数组或对象。

2、语法

            <element ng-repeat="expression"></element>

            所有的 HTML 元素都支持该指令。

 3、参数值

值描述
expression 表达式定义了如何循环集合。

表达式实例规则:

x in records

(key, value) in myObj

x in records track by $id(x)

4、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-repeat="item in records">
            <span>名字：{{item.Name}}</span>
            <span>国家：{{item.Country}}</span>
        </div>
        <hr>
        <div ng-repeat="(x,y) in myObj">
            <span>{{x}}</span>:
            <span>{{y}}</span>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.records = [
        {
        "Name" : "Alfreds Futterkiste",
        "Country" : "Germany"
        },{
        "Name" : "Berglunds snabbköp",
        "Country" : "Sweden"
        },{
        "Name" : "Centro comercial Moctezuma",
        "Country" : "Mexico"
        },{
        "Name" : "Ernst Handel",
        "Country" : "Austria"
        }
    ]
    $scope.myObj = {
        "Name" : "Alfreds Futterkiste",
        "Country" : "Germany",
        "City" : "Be"
    }
}])
</script>

三十八、ng-show

    1、定义和用法

        ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。

    2、语法

        <element ng-show="expression"></element>

         所有的 HTML 元素支持该指令。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="checkbox" ng-model="all">
        <div ng-show="all">hello</div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

三十九、ng-src

    1、定义和用法

                ng-src 指令覆盖了 <img> 元素的 src 属性。

                如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。

                ng-src 指令确保的 AngularJS 代码执行前不显示图片。

    2、语法

        <img ng-src="string"></img>

        <img> 元素支持该属性。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <div ng-init="myVar = 'http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
        <h1>Angular</h1>
        <img ng-src="{{myVar}}">
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

  四十、ng-srcset

    1、定义和用法

            ng-srcset 指令覆盖了 <img> 元素的 srcset 属性。

            如果你使用了 AngularJS 代码设置图片地址，请使用 ng-srcset 指令替代 srcset 属性。

            ng-srcset 指令确保的 AngularJS 代码执行前不显示图片。

    2、语法

            <img ng-srcset="string"></img>

            <img> 和 <source> 元素支持该属性。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
<img ng-src="images/space-needle.jpg"
ng-srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
            images/space-needle-hd.jpg 600w">
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
}])
</script>

四十一、ng-style

 

    1、定义和用法

            ng-style 指令为 HTML 元素添加 style 属性。

            ng-style 属性值必须是对象，表达式返回的也是对象。

            对象由 CSS 属性和值组成，即 key=>value 对。

    2、语法

        <element ng-style="expression"></element>

        所有的 HTML 元素都支持该属性。

    3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myController">
<div ng-style="all"></div>
</div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
$scope.all = {
height:'100px',
width:'100px',
background:'red'
}
}])
</script>

四十二、ng-submit

    1、定义和用法

            ng-submit 指令用于在表单提交后执行指定函数。

    2、语法

            <form ng-submit="expression"></form>

            <form> 元素支持该属性。

    3、参数值

值描述
expression 表单提交后函数将被调用，或者一个表达式将被执行，表达式返回函数调用。

            4、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <form  ng-submit="all()">
            <input type="text" name="admin">
            <input type="submit" value="提交">
        </form>
        {{text}}
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.text="还没提交"
    $scope.all = function(){
        $scope.text="已经提交"
    }
}])
</script>

四十三、ng-switch

    1、定义和用法

            ng-switch 指令根据表达式显示或隐藏对应的部分。

            对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

            你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

    2、语法

            <element ng-switch="expression">
                     <element ng-switch-when="value"></element>
                      <element ng-switch-when="value"></element>
                      <element ng-switch-when="value"></element>
                      <element ng-switch-default></element>
            </element>

            <form> 元素支持该属性。    

       3、实例 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <select ng-model="myVar">
            <option value="a">aaaaa</option>
            <option value="b">bbbbb</option>
            <option value="c">ccccc</option>
            <option value="d">ddddd</option>
        </select>
        <div ng-switch="myVar">
            <div ng-switch-when="a">我是第一个</div>
            <div ng-switch-when="b">我是第二个</div>
            <div ng-switch-when="c">我是第三个</div>
            <div ng-switch-default>我是第四个</div>
        </div>
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){

}])
</script>

  四十四、ng-transclude

四十五、ng-value

 

    1、定义和用法

            ng-value 指令用于设置 input 或 select 元素的 value 属性。

    2、语法

            <input ng-value="expression"></input>

                <input> 和 <select> 元素支持该属性。

        3、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="myController">
        <input type="text" ng-value="myValue">
    </div>
</body>
</html>
<script>
var app = angular.module('app',[])
app.controller('myController',['$scope', function($scope){
    $scope.myValue = 'abcdef'
}])
</script>

 

posted @ 2017-10-09 10:57  张书达  阅读(318)  评论(0)  编辑  收藏  举报