AngularJs学习笔记二

十一、ng-repeat指令及实例

•遍历集合

通过in的方式遍历每一项

•学过的指令有：

ng-app 初始化
ng-controller 控制器将指令和视图连接起来
ng-model 把视图本身数据和指令数据连接起来写在节点
ng-click 点击操作

输出数据

js

<script>
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.dataList=[
                'aaa','bbb','ccc'
        ]


    }]);
</script>

html

<div ng-controller="Aaa">
<ul><li ng-repeat="data in dataList">
{{data}}
</li></ul>
</div>

实例：表格的操作

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8     var m1 = angular.module('myApp',[]);
 9     m1.controller('Aaa',['$scope',function($scope){
10         $scope.dataList=[
11             {name:'a',age:'1'},
12             {name:'b',age:'2'},
13             {name:'c',age:'3'},
14             {name:'d',age:'4'},
15         ]
16 
17 
18     }]);
19 </script>
20 </head>
21 
22 <body>
23 <div ng-controller="Aaa">
24 <table border="1">
25     <tr>
26         <th>姓名</th>
27         <th>年龄</th>
28     </tr>
29     <tr ng-repeat="data in dataList">
30         <td>{{data.name}}</td>
31         <td>{{data.age}}</td>
32     </tr>
33 </table>
34 </div>
35 </body>
36 </html>

增加功能点击姓名或者年龄进行排序操作

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 <script>
 8     var m1 = angular.module('myApp',[]);
 9     m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
10         var oriData=[
11             {name:'a',age:'1'},
12             {name:'db',age:'2'},
13             {name:'ga',age:'4'},
14             {name:'cc',age:'3'},
15         ]//原始数据 使用原始数据过滤是保证搜索的时候都是从原始列表中搜索
16         $scope.dataList=oriData; //复制
17        /* $scope.dataList=[
18             {name:'a',age:'1'},
19             {name:'db',age:'2'},
20             {name:'ga',age:'4'},
21             {name:'cc',age:'3'},
22         ]*/
23         //自写排序函数
24      $scope.fnSort=function(arg){
25          arguments.callee['fnSort'+arg] =!arguments.callee['fnSort'+arg]//'fnSort'+arg防止和系统自带的属性冲突 arguments.callee再函数本身挂在参数 刚开始是没有的所以取反
26          $scope.dataList= $filter('orderBy')($scope.dataList,arg,arguments.callee['fnSort'+arg]);//格式：$filter('操作')(数据) aruments.callee['fnSort'+arg] 利用orderBy的第三个参数来判断升序和降序
27      }
28         //自写搜索函数
29         $scope.fnSearch=function(){
30           //  $scope.dataList= $filter('filter')( $scope.dataList,$scope.filetrVal);//$scope.filetrVal 从视图里面取值 filetrVal自定义
31             $scope.dataList= $filter('filter')( oriData,$scope.filetrVal);
32         }
33     }]);
34 </script>
35 </head>
36 <body>
37 <div ng-controller="Aaa">
38     <input type="text" ng-model="filetrVal"> <input type="button" ng-click="fnSearch()" value="搜索">
39 <table border="1">
40     <tr>
41         <th ng-click="fnSort('name')">姓名</th>
42         <th ng-click="fnSort('age')">年龄</th>
43     </tr>
44     <tr ng-repeat="data in dataList">
45         <td>{{data.name}}</td>
46         <td>{{data.age}}</td>
47     </tr>
48 </table>
49 </div>
50 </body>
51 </html>

十二、ng-repeat指令扩展部分

•扩展部分

$index
$first
$middle
$last
$even
$odd
ng-repeat-start
ng-repeat-end

{{$index}}  返回repeat数据的索引号0,1,2,3,4
{{$first}} 集合的第一项返回true，其他项返回false
{{$last}} 集合的最后一项返回true，其他项返回false
{{$middle}} 除了第一项和最后一项返回false，其他项都返回true
{{$even}} 奇数行返回true，偶数行都返回false
{{$odd}} 偶数行返回true，奇数行都返回false

隔行变色

先写上样式

   <style>
        .active1{background: red;}
        .active2{background: gray;}
    </style>

让奇数行为红色

<div ng-controller="Aaa">
 <ul><li class="{{$odd?'active1':'active2'}}" ng-repeat="data in dataList">
     {{data}}
 </li></ul>
</div>

ng-repeat-start
ng-repeat-end

实现兄弟之间的循环操作

用法

<div ng-controller="Aaa">
 <div ng-repeat-start="data in dataList">{{data}}</div>
    <p>{{data}}</p>
    <div ng-repeat-end>{{data}}</div>  
</div>

输出

aaa aaa aaa
bbb bbb bbb
ccc ccc ccc
ddd ddd ddd 
eee eee eee

十三、事件指令详解

ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
ng-selected
ng-change
ng-copy
ng-cut
ng-paste

•ng-selected

默认第一项，当复选框选择时选项会变成定义项222 ，需要和ng-model同时用才能起作用

<div ng-controller="Aaa">
     <input type="checkbox" ng-model="aaa">
     <select>
         <option>1111</option>
         <option ng-selected="aaa">222</option>
     </select>
</div>

•ng-change

ng-change当输入框发生改变时执行，需要和ng-model同时用才能起作用

<div ng-controller="Aaa">
    <input type="text" ng-change="bbb='需要输入字母'" ng-model="bbb">{{bbb}}
</div>

除了改变变量也可通过写函数的形式进行触发

•ng-copy 复制的时候触发

•ng-cut 剪切的时候触发

•ng-paste 粘贴的时候触发

<div ng-controller="Aaa">
    <input type="text" value="adfdfaa" ng-copy="a='您在复制'">{{a}}<br>
    <input type="text" value="adfdfaa" ng-cut="b='您在剪切 '">{{b}}<br>
    <input type="text" value="adfdfaa" ng-paste="c='您在粘贴'">{{c}}<br>
</div>

十四、angularJs的指令 input相关指令详解

•ng-disabled

–服务 $interval

•ng-readonly

•ng-checked

•ng-value

实例：5s后按钮可以点击

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script src="angular.min.js"></script>
 7 
 8 <script>
 9     var m1 = angular.module('myApp',[]);
10     m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
11         var isNow=5;
12         $scope.dataList= ['aaa','bbb','ccc','ddd','eee']
13         $scope.text=isNow+"秒";
14         $scope.isDisable=true;
15        var timer=$interval(function(){
16             isNow--;
17             $scope.text=isNow+"秒";
18             if(isNow==0){
19                 $interval.cancel(timer);//清除定时器
20                 $scope.text="可以点击了";
21                 $scope.isDisable=false;
22             }
23         },1000)
24     }]);
25 </script>
26 </head>
27 <body>
28 <div ng-controller="Aaa">
29     <input type="button" value="{{text}}"  ng-disabled="isDisable">{{a}}
30 </div>
31 </body>
32 </html>

<div ng-controller="Aaa">
    <input type="text" value="{{text}}"  ng-readonly="isDisable">{{a}}
</div>

ng-disabled和ng-readonly禁用的情况下状态不同

ng-checked为ture表示选中状态

<div ng-controller="Aaa">
    <input type="checkbox" value="{{text}}"  ng-checked="true">
</div>

ng-value指的是input里面的value，加上ng时需要把花括号去掉，加上之后的用户体验更好，可以防止用户看到表达式

<div ng-controller="Aaa">
    <input type="text" value="{{text}}" >
    <input type="text" ng-value="text" >
</div>

十五、数据显示优化处理及插件简介

ng-bind
ng-cloak
ng-bind-template
ng-bind-html
https://github.com/angular 插件下载地址
ng-non-bindable

•ng-bind 优化设置html里面的内容

<div ng-controller="Aaa">
    <div ng-bind="text"></div>
</div>

•ng-bind-template 支持多个表达式

<div ng-controller="Aaa">
    <div ng-bind-template="{{text}}，{{text}}，{{text}}"></div>
</div>

•ng-bind-html 用的比较少，因为angular本身是操作数据的，所以要引入插件

引入连接

<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>

加入模块

var m1 = angular.module('myApp',['ngSanitize']);

<div ng-controller="Aaa">
    <div ng-bind-html="text"></div>
</div>

•ng-cloak 标签在解析前表达式隐藏的，解析完成后显示相当于display：none

<div ng-controller="Aaa">
    <div ng-cloak>{{text}}</div>
</div>

•ng-non-bindable 不让表达式进行解析，表达式写的是什么就显示表达式本身，这种需求少，用的时候不多

<div ng-controller="Aaa">
    <div ng-non-bindable>{{text}}</div>
</div>

十六、样式相关指令

ng-class
ng-style
ng-href
ng-src
ng-attr-(suffix)

写法 ng-class="{样式名称:true} 后写样式的会覆盖之前写的样式

 <style>
        .red{ background:red;}
        .green{ background:green;}
    </style>

 <div ng-class="{red:true,green:true}">{{text}}</div>

 <div ng-style="{background:'red',color:'#ffffff'}">{{text}}</div>

第二种写法，引用的时候要加上花括号

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
    <script src="angular.min.js"></script>
    <style>
        .red{ background:red;}
        .green{ background:green;}
    </style>
<script>
    var m1 = angular.module('myApp',[]);
   m1.controller('Aaa',function($scope){
       $scope.text = 'hello';
       $scope.style = "{background:'green',color:'#ffffff'}";
       $scope.sClass = "{red:true,yellow:true}";
   })
</script>
</head>

<body>
<div ng-controller="Aaa">
    <div ng-class="{{sClass}}">{{text}}</div>
   <div ng-style="{{style}}">{{text}}</div>
</div>
</body>
</html>

ng-href第二种写法用户体验更好，防止用户在解析时看到表达式，所以在用动态表示式时加上ng更好

   $scope.url = "http://www.baidu.com";

  <a href="{{url}}">{{text}}</a>
    <a ng-href="{{url}}">aaaaaa</a>

不可能所以属性的都有ng-，所以有个通用的表达式 ng-attr-(suffix)

<a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-style=""  ng-attr-class="">aaaaaa</a>

十七、DOM操作相关指令详解

ng-show 控制一个元素的显示隐藏
ng-hide
ng-if
ng-swtich ------------on / default / when
ng-open

    <div ng-show="true">我会显示</div>
    <div ng-show="false">我会隐藏</div>
    <div ng-hide="true">我会隐藏</div>
    <div ng-hide="false">我会显示</div>

实例：选中显示，取消选中隐藏

<script>
    var m1 = angular.module('myApp',[]);
   m1.controller('Aaa',function($scope){
       $scope.bBtn = true;
     })
</script>
</head>

<body>
<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div ng-show="bBtn">我会显示</div>
</div>
</body>
</html>

ng-if是对dom节点进行添加和删除的操作，指令为true添加节点，false删除节点， ng-show是元素的显示隐藏

<div ng-if="bBtn">我会显示</div>

ng-swtich 有三种状态 --------on default when

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div ng-switch on="bBtn">
        <p ng-switch-default>默认效果</p>
        <p ng-switch-when="false">切换效果</p>
    </div>
</div>

ng-open html5有个针对<details>的属性open 支持兼容有问题

<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
     <details ng-open="bBtn">
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>
</div>

十八、指令扩展部分操作

ng-init
ng-include
ng-model
----ng-model-options
----updateOn
ng-controller as

ng-init

<div ng-controller="Aaa" ng-init="text='hello'">
    {{text}}
</div>

和在js里面写

$scope.text = "hello";

效果一样，不过在js里面写的清晰不容易出问题会更好一些，不过在有些特殊情况需要，如在嵌套循环的时候

 1 <script>
 2     var m1 = angular.module('myApp',[]);
 3    m1.controller('Aaa',function($scope){
 4      $scope.arr = [['a','b'],['c','d']];//复合数组
 5      })
 6 </script>
 7 </head>
 8 
 9 <body>
10 <div ng-controller="Aaa">
11     <div ng-repeat="outArr in arr">
12         <div ng-repeat="innerArr in outArr">
13           <p> {{innerArr}}</p> 
14         </div>
15     </div>
16 </div>

会输入abcd，现在想把他们的下标打印出来，可以如下操作：

<div ng-controller="Aaa" >
    <div ng-repeat="outArr in arr" ng-init="outIndex=$index">
        <div ng-repeat="innerArr in outArr" ng-init="innerIndex=$index">
          <p> {{innerArr}}:{{outIndex}}{{innerIndex}}</p>
        </div>
    </div>
</div

ng-include 通过模板或代码引入页面当中，其实就是一种引入的方式

如有页面temp.html，如下引入

<div ng-controller="Aaa" ng-include="temp.html">
 </div>

ng-model

基本用法实现双向绑定，修改输入框文字变化，h1也会同步进行变化

<script>
    var m1 = angular.module('myApp',[]);
   m1.controller('Aaa',function($scope){
     $scope.text ="hello";
     })
</script>
</head>
<body>
<div ng-controller="Aaa" >
    <input type="text" ng-model="text">
    <h1>{{text}}</h1>
    </div>
</body>
</html>

如果不想时时发生变化，想光标离开更新数据，输入的时候不更新数据用指令 ng-model-options ，里面有属性updateOn，让光标blur的时候触发

<div ng-controller="Aaa" >
    <input type="text" ng-model="text" ng-model-options="{updateOn:'blur'}">
    <h1>{{text}}</h1>
    </div>

ng-controller 控制器链接数据和视图的桥梁

    $scope.text ="hello";
       $scope.show =function(){};
       $scope.num ='123';等等

如果一个函数写的属性很多，如上，通过面向对象的形式来写，要用as的属性来接入创建一个对象，写法如下：

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6     <script src="angular.min.js"></script>
 7 <script>
 8     var m1 = angular.module('myApp',[]);
 9      m1.controller('Aaa',fnAaa);
10     function fnAaa($scope){
11     }
12     fnAaa.prototype.num='123';//在构造函数下利用原型写属性
13     fnAaa.prototype.text='hello';
14     fnAaa.prototype.show=function(){
15         return "angularJs"
16     }
17 </script>
18 </head>
19 <body>
20 <div ng-controller="fnAaa as a1" >
21     <h1>{{a1.text}}:{{a1.show()}}</h1>
22     </div>
23 </body>
24 </html>

这种写法对于开发复杂的功能是非常有用的一种方式。

十九、标签指令详解

<a>
<select> ------ng-options 用for in循环来操作
<textarea>
<input>
<form> -----novalidate

<div ng-app="myApp" ng-controller="Aaa" >
    <a href="">aaaaaa</a>
</div>
<a href="">bbbbb</a>

以上指令只对第一个div起作用，第二个a链接就是一般的html标签点击会执行默认刷新页面行为，第一个点击则不会，所以标签指令的特点一就是会阻止默认行为

注：ng-options必须和ng-model搭配使用才能执行

  <script>
        var m1 = angular.module('myApp',[]);
        m1.controller('Aaa',['$scope',function($scope){

            $scope.colors = [
                { name : 'red' },
                { name : 'yellow' },
                { name : 'blue' }
            ];

        }]);
    </script>
</head>

<body>
<div ng-app="myApp" ng-controller="Aaa" >
    <select ng-options=" color.name for color in colors " ng-model="myColor">
    </select>
</div>

<a href="">{{myColor.name}}</a>

可通过myColor来看对应数据

novalidate阻止html5默认自带的表单样式

 <form novalidate>
        <input type="email">
    </form>

angularJs的表单验证

$valid 有效的，表单验证通过为true，失败false
$invalid 无效的
$pristine 原始值初始状态下是ture，修改过为false
$dirty 脏值一旦修改过为true，没有改过false
$error 验证的所以信息
注意点 name的方式进行查找要写ng-model

 1 <!DOCTYPE HTML>
 2 <html ng-app="myApp">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 input.ng-valid{ border:1px green solid; background:green; color: #fff}
 8 input.ng-invalid{ border:1px red solid; background:red; color: #fff}
 9 </style>
10 <script src="angular.min.js"></script>
11 <script>
12 var m1 = angular.module('myApp',[]);
13 m1.controller('Aaa',['$scope',function($scope){
14     $scope.text = 'hello';
15     }]);
16 </script>
17 </head>
18 <body>
19 <div ng-controller="Aaa">
20     <form novalidate name="myForm">
21         <input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
22         <div>{{ myForm.myText.$valid }}</div>
23         <div>{{ myForm.myText.$invalid }}</div>
24         <div>{{ myForm.myText.$pristine }}</div>
25         <div>{{ myForm.myText.$dirty }}</div>
26         <div>{{ myForm.myText.$error }}</div>
27     </form>
28 </div>
29 </body>
30 </html>

输出

hello
true
false
true
false

一旦hello被修改，则输出

true
false
false
true
{"required":false,"pattern":false,"minlength":false}

如果input的类型改成email ，输出的hello格式是错误的，验证不能通过，所以输出的值为，并且输入框中没有hello是空值，当写正确格式，则会变化

false
true
true
false

二十、表单验证及实例

angularJs的表单验证

type emai 、 number 、 url
required 判断是否为空为空是true
ng-minlength 最小值
ng-maxlength 最大值
ng-pattern 正则验证

class

.ng-valid{}
.ng-invalid{}
.ng-pristine{}
.ng-dirty{}

实例实战中的表单验证方式

 1     <script>
 2         var m1 = angular.module('myApp',[]);
 3         m1.controller('Aaa',['$scope',function($scope){
 4             $scope.regText={
 5               regVal : 'default',
 6               regList:[
 7                   { name : 'default' , tips : '请输入用户名'},
 8                   { name : 'required' , tips : '用户名不能为空'},
 9                   { name : 'pattern' , tips : '用户名必须是字母'},
10                   { name : 'pass' , tips : '√'}
11               ],
12                 change:function(err){
13                    // console.log(err)
14                     for(var attr in err){
15                         if(err[attr]==true){
16                             this.regVal=attr;
17                             return;
18                         }
19                     }
20                     this.regVal='pass';
21                 }
22             };
23             $scope.regPassword={
24                 regVal : 'default',
25                 regList : [
26                     { name : 'default' , tips : '请输入密码'},
27                     { name : 'required' , tips : '密码不能为空'},
28                     { name : 'minlength' , tips : '密码至少6位'},
29                     { name : 'pass' , tips : '√'}
30                 ]
31                 ,
32                 change:function(err){
33                     // console.log(err)
34                     for(var attr in err){
35                         if(err[attr]==true){
36                             this.regVal=attr;
37                             return;
38                         }
39                     }
40                     this.regVal='pass';
41                 }
42             };
43         // ng-pattern='/^[a-zA-Z]+$/' 验证字母
44         //ng-blur="regText.change(nForm.nText.$error)" 光标离开
45         }]);
46     </script>
47 </head>
48 <body>
49 <div ng-controller="Aaa">
50     <form novalidate="" name="nForm">
51         <div>
52         <label>用户名</label>
53             <input type="text" name="nText" ng-model="regText.name" required=""  ng-pattern='/^[a-zA-Z]+$/' ng-blur="regText.change(nForm.nText.$error)">
54             <span ng-repeat="re in regText.regList | filter:regText.regVal">{{re.tips}}</span>
55         </div>
56         <div>
57             <label>密码</label>
58             <input type="password" name="nPassword" ng-model="regPassword.name" required=" " ng-minlength="6" ng-blur="regPassword.change(nForm.nPassword.$error)">
59             <span ng-repeat="re in regPassword.regList | filter:regPassword.regVal">{{re.tips}}</span>
60         </div>
61     </form>
62 </div>

简化版，提取相同功能

 1     <script src="angular.min.js"></script>
 2     <script>
 3         var m1 = angular.module('myApp',[]);
 4         m1.controller('Aaa',['$scope',function($scope){
 5             $scope.regText={
 6               regVal : 'default',
 7               regList:[
 8                   { name : 'default' , tips : '请输入用户名'},
 9                   { name : 'required' , tips : '用户名不能为空'},
10                   { name : 'pattern' , tips : '用户名必须是字母'},
11                   { name : 'pass' , tips : '√'}
12               ]
13             };
14             $scope.regPassword={
15                 regVal : 'default',
16                 regList : [
17                     { name : 'default' , tips : '请输入密码'},
18                     { name : 'required' , tips : '密码不能为空'},
19                     { name : 'minlength' , tips : '密码至少6位'},
20                     { name : 'pass' , tips : '√'}
21                 ]
22             };
23             $scope.change = function( reg , err ){
24                 for(var attr in err){
25                     if( err[attr] == true ){
26                         $scope[reg].regVal = attr;
27                         return;
28                     }
29                 }
30                 $scope[reg].regVal = 'pass';
31             };
32         }]);
33     </script>
34 </head>
35 <body>
36 <div ng-controller="Aaa">
37     <form novalidate="" name="nForm">
38         <div>
39         <label>用户名</label>
40             <input type="text" name="nText" ng-model="regText.name" required=""  ng-pattern='/^[a-zA-Z]+$/' ng-blur="change('regText',nForm.nText.$error)">
41             <span ng-repeat="re in regText.regList | filter:regText.regVal">{{re.tips}}</span>
42         </div>
43         <div>
44             <label>密码</label>
45             <input type="password" name="nPassword" ng-model="regPassword.name" required=" " ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)">
46             <span ng-repeat="re in regPassword.regList | filter:regPassword.regVal">{{re.tips}}</span>
47         </div>
48     </form>
49 </div>
50 </body>
51 </html>

思考：在有个密码框验证是否输入相同

posted @ 2015-09-28 16:48 Eve0803 阅读(269) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Eve

我与我周旋久已，宁做我。

AngularJs学习笔记二

公告