前端MVC学习总结(二)——AngularJS验证、过滤器、指令

一、验证

angularJS中提供了诸多底验证指令,可以轻松的实现认证,只待以表单元素上加上相应的ng属性,常见的如下所示:

<input Type=”text” ng-model=”” [name=””] [required=””]
[ng-required=””] [ng-minlength=””]
[ng-maxlength=””][ng-pattern=””][ng-change=””] [ng-trim=””]>

图片 1

表单与表单元素还急需经过name引用,请留心设置name的值。获得错误的详实参数可以当演示中看出。

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>验证</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
                <label for="username">帐号:</label>
                <input type="text" id="username" name="username" ng-model="username" ng-required="true" />
                必填
            </p>
            <p>
                <label for="username">密码:</label>
                <input type="text" id="password" name="password" ng-model="password" ng-required="true" ng-pattern="/^[a-z]{6,8}$/" ng-trim="true"/>
                必填
                只允许6-8位小写字母
            </p>
            <p>
                密码的值:{{"["+password+"]"}}<br/>
                是否合法:form1.password.$valid={{form1.password.$valid}}<br/>
                是否非法:form1.password.$invalid={{form1.password.$invalid}}<br/>
                错误消息:form1.password.$error={{form1.password.$error}}<br/>
                是否修改:form1.password.$dirty={{form1.password.$dirty}}<br/>
                是否默认:form1.password.$pristine={{form1.password.$pristine}}<br/>
            </p>
            <p>
                表单信息:<br/>
                错误消息:form1.$error={{form1.$error}}<br/>
                是否合法:form1.$valid={{form1.$valid}}<br/>
                是否非法:form1.$invalid={{form1.$invalid}}<br/>
            </p>
            <p>
                <button ng-disabled="form1.$invalid">提交</button>
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });
        </script>
    </body>

</html>

运作结果:

图片 2

二、过滤器

采取过滤器格式化数据,变换数据格式,在模板被利用一个插值变量。语法格式如下:

{{ express | filter:parameter1:p2:p3… | … | …}}

过滤器分了放过滤器与自定义过滤器,过滤器的调用方式吧瓜分了以模板被调用与在函数中调用。

2.1、内置过滤器

广的放到过滤器有:

1)、currency(货币)

{{123.456 | currency:’¥’}}

2)、number(数字)

{{12.235| number:2}}

3)、uppercase , lowercase(大小写)格式化

{{“Hello”| uppercase}}

4)、json(数据)格式化

{{userObject| json}}

5)、limitTo(截取)格式化,数量限制 {{“StringObject” | limitTo : 3}}

6)、date 日期格式化

{{name | date : ‘yyyy-MM-dd hh:mm:ss’}}

‘yyyy’: 4各类数字的东(如AD 1 => 0001, AD 2010 => 2010)
‘yy’: 2个数字之年份,范围也(00-99)。(如AD 2001 => 01, AD 2010 =>
10)
‘y’: 1号数字的夏,例如 (AD 1 => 1, AD 199 => 199)
‘MMMM’: 月份 (January-December)
‘MMM’: 月份 (Jan-Dec)
‘MM’: 月份, padded (01-12)
‘M’: 月份 (1-12)
‘dd’: 日,范围为(01-31)
‘d’: 日 (1-31)
‘EEEE’: 星期,(Sunday-Saturday)
‘EEE’: 星期, (Sun-Sat)
‘HH’: 小时, 范围为(00-23)
‘H’: 小时 (0-23)
‘hh’: am/pm形式之钟点, 范围为(01-12)
‘h’: am/pm形式之小时, (1-12)
‘mm’: 分钟,范围为 (00-59)
‘m’: 分钟 (0-59)
‘ss’: 秒, 范围为 (00-59)
‘s’: 秒 (0-59)
‘.sss’ or ‘,sss’: 毫秒,范围为 (000-999)
‘a’: am/pm 标记
‘Z’: 4 位数字的时区偏移(+符号)(-1200-+1200)
‘ww’: ISO-8601 年内的周数 (00-53)
‘w’: ISO-8601 年内的周数 (0-53)

format 字符串也得是以下预定义的地面化格式之一:
‘medium’: 等于en_US本地化后的 ‘MMM d, y h:mm:ss a’ (如:Sep 3, 2010
12:05:08 pm)
‘short’: 等于en_US本地化后底 ‘M/d/yy h:mm a’ (如: 9/3/10 12:05 pm)
‘fullDate’: 等于en_US本地化后底 ‘EEEE, MMMM d, y’ (如: Friday,
September 3, 2010)
‘longDate’: 等于en_US本地化后底 ‘MMMM d, y’ (如: September 3, 2010)
‘mediumDate’: 等于en_US本地化后底 ‘MMM d, y’ (如: Sep 3, 2010)
‘shortDate’: 等于en_US本地化后底 ‘M/d/yy’ (如: 9/3/10)
‘mediumTime’: 等于en_US本地化后的 ‘h:mm:ss a’ (如: 12:05:08 pm)
‘shortTime’: 等于en_US本地化后底 ‘h:mm a’ (如: 12:05 pm)
format 字符串可以蕴涵固定值。这需要用单引号括起来 (如: “h ‘in the
morning'”)。如果如出口单引号,使班中行使简单个单引号(如: “h
‘o”clock'”)。

7)、orderBy(排序)格式化

orderBy:’age’:reverse
reverse是true表示降序、false表示升序

8)、filter(筛选&过滤)格式化

{{name | filter : ‘l’ | json}}

2.1.1、在模板被使过滤器

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
                货币:{{money}} ,{{money|currency}} ,{{money|currency:"¥"}}
            </p>
            <p>
                数字:{{money|number:1}} ,{{money | number:1 | currency:"$" }}
            </p>
            <p>
                大写:{{message|uppercase}}
            </p>
            <p>
                小写:{{message|lowercase}}
            </p>
            <p>
                json:{{user | json}}
            </p>
            <p>
                截取:{{message|limitTo:5|uppercase}}
            </p>
            <p>
                日期1:{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}
            </p>
            <p>
                日期2:{{birthday|date:'fullDate'}}
            </p>
            <p>
                排序:{{users|orderBy:'age':true}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.money=1985.678;
                $scope.message="Hello AngularJS!"
                $scope.user={name:"rose",age:18};
                $scope.birthday=new Date();
                $scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];
            });
        </script>
    </body>

</html>

运作结果:

图片 3

2.1.2、在本子中调用过滤函数

以函数中调用过滤器的法是:在支配中补充加对$filter的负,$filter(“过滤函数名”)(被滤对象,’参数’)

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            {{money}}
            <hr/>
            {{moneyString}}
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.money=1985.897;
                //使用$filter服务查找currency函数,并调用
                $scope.moneyString=$filter("currency")($scope.money,'USD$');
            });
        </script>
    </body>

</html>

运转结果:

图片 4

2.2、自定义过滤器

演示代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <p>
            {{"Hello AngularJS and NodeJS" | cutString:15:'...'}}
            </p>
            <p>
                {{longString}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);

            //向模块中添加过滤
            //用于裁剪字符,超过长度则截取,添加...
            app01.filter("cutString",function(){
                return function(srcString,length,addString){
                    if(srcString.length<length){
                        return srcString;
                    }
                    return srcString.substring(0,length)+addString;
                }
            });

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope,$filter) {
                $scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");
            });
        </script>
    </body>

</html>

运作结果:

图片 5

练习1:

图片 6

点击价格与名称可以进行排序,排序时显示向上或于下的箭头,在摸框中可以输入查询条件过滤数据。验证搜索框中的内容只能是字母和数字,不同意输入外门类的字符。

练习2:

请求从定义一个过滤器实现敏感关键字过滤,在过滤器中得准备一个敏感词数组,将敏感词替换成指定的号,默认为*号。
{{“This is some bad,dark evil text” | censor:”bad,dark,evil”:”happy”}}
展示结果:
This is some happy,happy happy text

三、指令(directive)

指令(directive)是AngularJS模板标记和用来支持之JavaScript代码的三结合。AngularJS指令标记可以是HTML属性、元素名称或者CSS类,指令扩展了HTML的表现。指令可以分成:
a)、内置指令:支持AngularJS功能的下令、扩展表单元素的命令、把作用域绑定到页面元素的指令
b)、自定义指令,增加以及壮大出新的授命。

ng-app这样的号我们誉为指令。模板通过指令指示AngularJS进行必要的操作。
比如:ng-app指令用来通知AngularJS自动引导下;ez-clock
指令用来通知AngularJS生成指定的钟表组件。

3.1、支持AngularJS功能的授命

3.1.1、应用与模块(ng-app)

自动载入启动一个AngularJS应用,声明了ng-app的素会化为$rootScope的起点
每个HTML文档只有一个AngularJS应用能够于自动载入启动,文档中找到的率先只ngApp将受用于定义自动载入启动的使用之根元素。要以一个HTML文档中运作多单应用,你要使angular.bootstrap来手工启动。AngularJS应用中不能够嵌套。

3.1.2、控制器(ng-Controller)

ngController指令给视图添加一个控制器,控制器之间可嵌套,内层控制器可以使外层控制器的目标,但转老。这是angular支持因“视图-模型-控制器”设计模式原则的根本方面。

Angular中的MVC组件有:
范 — 模型是一个域底特性集合;域于增大到DOM上,通过绑定来存取域属性。
视图 — 模板(进行数据绑定的HTML)会给展现到视图中。
控制器 —
ngController指令声明一个操纵器类;该类包含了事情逻辑,在采用后台使用函数和价值来决定控域中之性。
留神,你呢能采用$route服务概念一个路由来拿控制器附加到DOM上。一个常见错误是在模板上重复利用ng-controller定义一个控制器。这将唤起控制器被增大和实行两不行。

3.1.3、包含(ng-Include)

取、编译并引述一个标HTML片段(也足以是内部的)

默认情况下,模板URL被胁持为使用与祭文档相同之域名及协商。这是通过调用$sce.getTrustedResourceUrl
实现之。为了打另外的域名与情商载入模板,你得行使 白名单化 或 包裹化
任一手段来作为可信任值。参考 Angular的 强上下文转义。
此外,浏览器的 同源策略 和 交叉源资源共享(CORS)
策略会更为限制模板是否会学有所成载入。例如,ngInclude
在具有浏览器上不克开展交叉域请求,一些浏览不可知顾 file:// 等于。

<ng-include src=”” [onload=””]
[autoscroll=””]></ng-include>
<ANY ng-include=”” [onload=””] [autoscroll=””]></ANY>
<ANY class=”ng-include: ; [onload: ;] [autoscroll: ;]”>
</ANY>

外部包含:

表包含是据包含一个单身的表面文件。

蕴含时呼吁留意中间页面地址要加引号,需要之是一个字符,如果不加会认为是一个变量。

header.html

<header>
    <h2>欢迎光临天狗商城</h2>
</header>

footer.html

<style>
    .cls1 {
        background: lightblue;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
</style>
<footer class="cls1">
    <h3>版本所有 违者必究</h3>
</footer>

d05.html

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>
            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
            function regTest()
            {
                var reg1=new RegExp("\d","igm");
                var reg2=/\d/igm;

                var str="This is some bad,dark evil text";
                str=str.replace(/bad|dark|evil/igm,"Happy");
                console.log(str);

                //取出Hello Hello
                var str="<input value='Hello'/><input value='World'/>";
                //将value中的内容前后增加一个*
            }
            regTest();
        </script>
    </body>

</html>

运转结果:

图片 7

其中含有:

优先定义模板,指定id与品类,模板被得是随便片段:

<script id=”p1″ type=”text/ng-template”>

援模板,模板被可利用angular表达式,引用的方式以及表面包含一样。

 

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <ng-include src="header"></ng-include>
            <ng-include src="'header.html'"></ng-include>

            <script id="template1" type="text/ng-template">
                您想购买的商品是:{{product}}
            </script>

            <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
            <ng-include src="'template1'" onLoad="product='TF卡'"></ng-include>

            <div ng-include="'footer.html'"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
            function regTest()
            {
                var reg1=new RegExp("\d","igm");
                var reg2=/\d/igm;

                var str="This is some bad,dark evil text";
                str=str.replace(/bad|dark|evil/igm,"Happy");
                console.log(str);

                //取出Hello Hello
                var str="<input value='Hello'/><input value='World'/>";
                //将value中的内容前后增加一个*
            }
            regTest();
        </script>
    </body>

</html>

 

运转结果:

图片 8

方的结果尚且是“TF卡”的因由是盖模板是先包含重复分析的,后定义的变量覆盖前定义之,并无是一面包含一边渲染的。

3.1.4、不绑定(ngNonBindable)

ngNonBindable指令告诉Angular编译或绑定当前DOM元素的情节。这对要求Angular忽略那些元素被蕴含Angular指令和绑定的状下好有因此。这种情况能吃你的网站实时显示源码。

<div>Normal: {{1 + 2}}</div><div
ng-non-bindable>Ignored: {{1 + 2}}</div>

脚本:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
            <p>
                被解析的表达式:1+2={{1+2}}
            </p>
            <p ng-non-bindable="true">
                不解析的表达式:1+2={{1+2}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
        </script>
    </body>

</html>

结果:

图片 9

3.2、扩展表单元素的指令

3.2.1、ng-options

该令允许而根据一个迭代表达式添加选项

<select ng-model=”color” ng-options=”c.name for c in colors”>

<option>–请选择–</option>

</select>

ng-model必须要指定,默认情况下受增选的值就是现阶段目标,没有value的项将被解除。

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <h3>基础下拉列表:</h3>
            <p>
                <select ng-model="user1" ng-options="u.name for u in users">
                    <option value="">--请选择--</option>
                </select>
                 {{user1}}
            </p>
            <h3>带分组的下拉列表:</h3>
            <p>
                <select ng-model="user2" ng-options="u.name group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user2}}
            </p>
            <h3>组合的下拉列表:</h3>
            <p>
                <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user3}}
            </p>
            <h3>自定义ng-model的值:</h3>
            <p>
                <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">
                    <option  value="">--请选择--</option>
                </select>
                 {{user4}}
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.users = [{
                    id: 1,
                    name: "tom",
                    sex: "男",
                    age: 19
                }, {
                    id: 2,
                    name: "rose",
                    sex: "女",
                    age: 18
                }, {
                    id: 7,
                    name: "jack",
                    sex: "男",
                    age: 16
                }, {
                    id: 9,
                    name: "lucy",
                    sex: "女",
                    age: 20
                }, {
                    id: 15,
                    name: "mark",
                    sex: "男",
                    age: 89
                }];
            });
        </script>
    </body>
</html>

 

运行结果:

 图片 10

3.2.2、ng-class-even与ng-class-odd

AngularJS模板使您可以拿该作用域内之数码直接绑定到所显示的HTML元素

ng-class-even与ng-class类似,ng-repeat中偶数时用

ng-class-odd与ng-class类似,ng-repeat中奇数时以

<p ng-repeat=”a in animals” ng-class-odd=”‘odd'”
ng-class-even=”‘even'”>
   {{a.name}}
</p>

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style>
            .bg1{
                background: lightcoral;
                color:white;
            }
            .bg2{
                background: lightpink;
                color: white;
            }
        </style>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <ul>
                <li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
                    {{u.name}}
                </li>
            </ul>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.users = [{
                    id: 1,
                    name: "tom",
                    sex: "男",
                    age: 19
                }, {
                    id: 2,
                    name: "rose",
                    sex: "女",
                    age: 18
                }, {
                    id: 7,
                    name: "jack",
                    sex: "男",
                    age: 16
                }, {
                    id: 9,
                    name: "lucy",
                    sex: "女",
                    age: 20
                }, {
                    id: 15,
                    name: "mark",
                    sex: "男",
                    age: 89
                }];
            });
        </script>
    </body>
</html>

运作结果:

图片 11

3.2.3、ng-bind-template

并且绑定多只表达式块

<p ng-bind-template=”{{student1}} and {{student2}}”></p>

示例:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <div ng-bind="info1">{{info2}}</div>

            <div ng-bind-template="{{info1}} ? 答案是:{{info2}}"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
                $scope.info1="1+1=";
                $scope.info2="2";
            });
        </script>
    </body>
</html>

 

结果:

图片 12

3.2.4、ng-init

初始化

<p ng-init=”test=1″ ng-repeat=”a in animals”>
    {{a.name}} {{a.id+test}}
</p>

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1">
            <ul ng-init="nums=[1,1,2,2,3,3,4,4,5,5]">
                <li ng-repeat="i in nums track by $index">
                    {{i}}+1={{i+1}}
                </li>
            </ul>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {
            });
        </script>
    </body>
</html>

运行结果:

图片 13

dupes错误说明:

AngularJS does not allow duplicates in a ng-repeat directive. This means
if you are trying to do the following, you will get an error.

ng-repeat不允再次。

<div ng-repeat=”row in [1,1,1]”>
<div ng-repeat=”row in [1,1,1] track by $index”>

ng-repeat还是得一个唯一的key

3.2.5、ng-switch

基于作用域表达式动态切换把特别DOM元素包含在都编译的沙盘被。

图片 14

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            请输入颜色:<input ng-model="color" />
            <p ng-switch="color" ng-style="{'color':color}">
                红色
                绿色
                蓝色
                输入错误,请输入red,green,blue
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

运作结果:

图片 15

3.2.6、ng-value

绑定给定的表达式到input[select]或 input[radio]的值上

<input type=”radio” ng-value=”‘值'” ng-model=”radioValue”
/>{{radioValue}}

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            <p>
                是否同意:
                <input type="radio" ng-value="'同意'" ng-model="isAllow" name="allow" />yes
                <input type="radio" ng-value="'不同意'" ng-model="isAllow" name="allow" />no
                <p>
                    {{isAllow}}
                </p>
            </p>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为空
            var app01 = angular.module("app01", []);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

 

以身作则结果:

图片 16

只是允许以以radio与select上,checkbox无效。

3.3、事件

ng-blur 失去焦点
ng-change 改变
ng-checked 被选择
ng-click 点击
ng-copy 复制
ng-cut 剪切
ng-dbclick 双击
ng-focus 获得焦点
ng-keydown 按下键
ng-keyup 按键弹起
ng-mousedown 鼠标按下
ng-mouseenter 鼠标上
ng-mouseleave 鼠标离开
ng-mousemove 鼠标移动
ng-mouseup 鼠标按下后反弹
ng-paste 粘贴
ng-submit 提交
ng-swipe-left 左滑动
ng-swipe-right 右滑动

稍稍特殊之轩然大波要引入外部模块支持,如ng-swipe-left,首先添加引用:

<script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>

在概念模块时指定要负的模块:

            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", ['ngTouch']);

 图片 17

另外的步骤及下普通事件相同了。

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .circle{
                width: 100px;
                height: 100px;
                background: lightgreen;
                border-radius: 50px;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
            <h3 ng-init="left=200">left:{{left}}</h3>
            <div ng-swipe-left="left=left-10" ng-swipe-right="left=left+10"  class="circle" ng-style="{'left':left+'px'}"></div>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular146/angular-touch.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", ['ngTouch']);
            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {});
        </script>
    </body>

</html>

运转结果:

图片 18

3.4、其它内置指令

angular中提供了森之嵌入指令,还如同:ng-{app/bind/bind-html/bind-template/blur/change/checked/class/class-even/class-odd/click/cloak/controller/copy/csp/cut/dblclick/disabled/focus/hide/href/if/include/init/keydown/keypress/keyup/list/model/mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup/ng-non-bindable/open/options/paste/readonly/repeat-start/repeat-end/selected/show/src/srcset/style/submit/swipe-left/swipe-right/switch/switch-default/switch-when/view}

足翻帮助文档获得详细的信息。

3.5、自定义指令

放置的指令就再添加呢是零星的,对于非常规的内需可以选择由定义指令,自定义指令可以包常用操作为有益分享与交流,自定义指令的语法格式如下:

module.directive(‘指令名称’,function(){
    return {
      template:插入指令元素的模版
      restrict:允许指令下之限制
      replace:告诉编译器用命令模板取代定义该令的元素
      transclude:是否可看中作用域以外的作用域
      scope:指定内部作用域
      link:链接函数
      controller:定义控制器来管理指令作用域和视图
      require:指定所需要的外指令
   };
});

restrict:限制令行为,允许指令以之克,取值,可以组成,如AE。

图片 19

@:使用@(@attribute)来进展单独为文本(字符串)绑定
= :使用=(=attribute)进行双向绑定变量
& :使用&来调用父作用域中的函数

3.5.1、第一只从定义指令

以身作则代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1">

            <div my-Timer></div>
             <br/>
            <my-Timer></my-Timer>

        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", []);

            //在模块app01上定义curentTime指令
            app01.directive("myTimer",function(){
                return {
                    template:""+new Date().toLocaleString()+"",  //模板
                    restrict:"AE",  //可应用范围
                    replace:true //是否替换
                };
            });

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });
        </script>
    </body>

</html>

运行结果:

图片 20

因为使用了replace属性,所以div标签为替换了,另外restrict指定为AE则标签可以作为元素和特性使用。

3.5.2、自定义时钟

及只由定义指定特别简单,我拿直达一个下令修改也好动态变化的岁月与可以叫时钟指定参数和事件。

示范代码:

<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">

    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>

    <body>
        <!--指定控制器的作用范围-->
        <form ng-controller="Controller1">

        <my-Timer color="blue" passed="0" interval="1000"></my-Timer>
        </form>
        <!--引入angularjs框架-->
        <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义模块,指定依赖项为ngTouch
            var app01 = angular.module("app01", []);

            //定义控制器,指定控制器的名称,$scope是全局对象
            app01.controller("Controller1", function($scope) {

            });

            //在模块app01上定义curentTime指令
            app01.directive("myTimer",function(){
                return {
                    template:"",  //模板
                    restrict:"AE",  //可应用范围
                    replace:true, //是否替换
                    scope:{
                        color:'@'
                    },
                    link:function(scope,elem,attr,controller){
                        var i=attr.interval||1000;
                        elem.text(new Date().toLocaleString()+"    已计时:"+attr.passed+"秒");  //向元素中设置文本为当前时间
                        //定时器,每隔指定的时间调用函数
                        setInterval(function(){
                            attr.passed=parseInt(attr.passed)+parseInt(i/1000);
                            elem.text(new Date().toLocaleString()+"    已计时:"+attr.passed+"秒");  //向元素中设置文本为当前时间
                        },i);
                    }
                };
            });
        </script>
    </body>

</html>

运行结果:

图片 21

季、示例下载

 github仓库:https://github.com/zhangguo5/Angular02.git

相关文章