angular

Demo1：简介

ng-app ng-model 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

    <div ng-app="">
        <p>名字：<input type="text" ng-model="name"></p>
        <h1>Hello {{name}}</h1>
    </div>

</body>
</html>
View Code

ng-bind  ng-init

<!-- ng-init 指令初始化 AngularJS 应用程序变量
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML
div要包含住ng-app，否则ng元素失效 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <div ng-app="" ng-init="firstName='John'">

    <p>姓名为：<span ng-bind="firstName"></span></p>
    </div>
</body>
</html>
View Code

Module Controller  用汉字才能对齐，用英文就丑了

<!-- AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <p>尝试修改以下表单。</p>

    <div ng-app="myApp" ng-controller="myCtrl">
        姓: <input type="text" ng-model="lastName"><br>
        名:  <input type="text" ng-model="firstName"><br><br>
        name: {{firstName +" "+ lastName}}
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = 'John';
            $scope.lastName = 'Doe';
        })
    </script>
</body>
</html>
View Code

-------------------------------------------------------------------------------------------

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

-----------------------------

Demo2：指令

HTML控制器input/select/textarea

ng-repeat

<!-- ng-repeat 指令会重复一个 HTML 元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <div data-ng-app="" data-ng-init="names=['tab', 'ctrl', 'shift']">
        <ul>
            <li data-ng-repeat="x in names">
                {{x}}
            </li>
        </ul>
    </div>
</body>
</html>
View Code

directive自定义指令

<!-- angular.module小写
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict写在template同样的位置 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
    <miao-directive></miao-directive>
    <script>
        var myApp = angular.module('myApp', []);
        myApp.directive('miaoDirective', function() {
            return {template: '<h1>自定义指令！</h1>'};
        });
    </script>
</body>
</html>
View Code

 Demo3：模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model

<!-- 引用controller内容就用ng-model -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        名字：<input type="text" ng-model="name">
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = 'Miaomiao Tab';
        });
    </script>
</body>
</html>
View Code

 .

<!-- angular写成了angula -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <div ng-app='myApp' ng-controller='myCtrl'>
        名字：<input type="text" ng-model="name">
        <h1>你输入了{{name}}</h1>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = 'Miaomiao Tab';
        });
    </script>
</body>
</html>
View Code

 error email ng-show

<!-- div : form 
text is required in span to show-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <form ng-app="" name="myForm">
        Email: <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">email error</span>
        <p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>
    </form>
</body>
</html>
View Code

valid dirty touched

<!-- {{}} 
myForm.myAddress.$valid not .email added-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
    <form name="myForm" ng-app="">
    Email: <input type="email" name="myAddress" ng-model="text">
    <p>编辑邮箱地址，查看状态的改变。</p>
    <h1>状态</h1>
    <p>Valid:  {{myForm.myAddress.$valid}}(如果输入的值是合法的则为 true)。</p>
    <p>Dirty:  {{myForm.myAddress.$dirty}}(如果值改变则为true )。</p>
    <p>Touched:  {{myForm.myAddress.$touched}}(如果触屏点击的则为 true)。</p>
    </form>
</body>
</html>
View Code

 bgcolor

<!-- <style type="text/css">
ng-model="myText"
input.ng-invalid  not input .ng-invalid -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    <style>
        input.ng-invalid{
            background-color: lightblue
        }
    </style>
</head>
<body>
    <form name="myForm" ng-app="">
        <span>输入你的名字:</span>
        <input name="myName" ng-model="myText" required>
    </form>
    <p>编辑文本域，不同状态背景颜色会发送变化。</p>
    <p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
</body>
</html>
View Code

Demo4：控制域

scope作用域:HTML视图与javascript控制器之间的纽带

.

<!-- app.controller('myCtrl', function($scope)  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{carTab}}</h1>
    </div>
    <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>

    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.carTab = 'Volvo';
        })
    </script>
</body>
</html>
View Code

 AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <form ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name">
        <h1>我的名字是 {{name}}</h1>
    </form>
    <p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = 'Miaomiao Tab';
        });
    </script>
</body>
</html>
View Code

ng-repeat

<!-- "var x in names" :   ng-repeat="x in names" -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in names" ><h1>{{x}}</h1></li>
        </ul>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.names=['tab', 'ctrl', 'shift'];
        });
    </script>
</body>
</html>
View Code

$rootScope

<!-- 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>姓氏为 {{lastname}} 家族成员:</h1>
        <ul>
            <li ng-repeat="x in names" >{{x}}</li>
        </ul>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            $scope.names=['tab', 'ctrl', 'shift'];
            $rootScope.lastname =  'Refsnes';
        });
    </script>
    <p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>
View Code

 aasdfasdfafsdasdasdfasdfasdasdf

#^%&*^&*^(&^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    </script>
</body>
</html>

<!-- 应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
→myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName） -->
View Code

控制器方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{fullname()}}
    

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.fullname = function() {
            return   $scope.firstName + " " + $scope.lastName
        };
    });
    </script>
</body>
</html>

<!-- 应用解析：
{{fullname()}}  not {{fullname}} -->
View Code

外部文件中的控制器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <ul>
            <li ng-repeat="x in names">{{x.name + " comes from " +x.country}}</li>
        </ul>
    </div>

    <script src="xx.js"></script>
</body>
</html>

<!-- Totally wrong!!!   :  
angular.module('myApp', function($scope) 
angular.module('myApp',[]).controller('lose', function($scope)  -->

//xx.js
angular.module('myApp',[]).controller('lose', function($scope) {
    $scope.names = [
        {name:'Jessy', country:'Norway'},
        {name:'Nancy', country:'Sweden'},
        {name:'Delby', country:'Denmark'},
    ];
});
View Code

大小写/货币

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        {{name | lowercase}}
    </div>
    <script src="xx.js"></script>
</body>
</html>

<!-- {{name | uppercase}} 
{{name | lowercase}}
<p>总价={{quantity * price | currency}}</p>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        数量：<input type="number" ng-model="quantity">
        价格：<input type="number" ng-model="price">
        <p>总价={{quantity * price | currency}}</p>
    </div>
    
    <script>
        angular.module('myApp',[]).controller('lose', function($scope) {
            $scope.quantity = 1;
            $scope.price = 9.99;
        });
    </script>
</body>
</html>
View Code

指令中添加过滤器  排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <ul>
            <li ng-repeat="x in names | orderBy: 'country'">{{x.name + " , " + x.country}}</li>
        </ul>
    </div>
    <script src='xx.js'></script>
</body>
</html>


<!-- not this:{{x.name | orderBy: 'country'}} 
right like this:<li ng-repeat="x in names | orderBy: 'country'">-->

//xx.js
angular.module('myApp',[]).controller('lose', function($scope) {
    $scope.names = [
        {name:'Jessy', country:'Norway'},
        {name:'Nancy', country:'Sweden'},
        {name:'Delby', country:'Denmark'}
    ];
});
View Code

过滤输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        输入过滤：<input type="text" ng-model="test">
        <ul>
            <li ng-repeat="x in names | filter:  test | orderBy: 'country'">{{x.name + " , " + x.country}}</li>
        </ul>
    </div>
    <script src='xx.js'></script>
</body>
</html>


<!-- not this:filter:  'test'
right like this:filter:  test-->
View Code

Demo5：服务
服务(Service)是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <p>当前页面的url：</p>
        <h3>{{myUrl}}</h3>
        <p>使用$location服务获取当前页面的URL</p>
    </div>
    <script>
        angular.module('myApp', []).controller('lose', function($scope, $location) {
            $scope.myUrl = $location.absUrl();
        })
    </script>
</body>
</html>
View Code

 http interval服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <p>欢迎信息：</p>
        <h3>{{myWelcome}}</h3>
        <p>$http服务向服务器请求信息</p>
    </div>
    <script>
        angular.module('myApp', []).controller('lose', function($scope, $http) {
            
            $http.get('welcome.htm').then(function (response) {
                $scope.myWelcome = response.data;
            });

        })
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <p>欢迎信息：</p>
        <h3>{{theTime}}</h3>
        <p>$http服务向服务器请求信息</p>
    </div>
    <script>
        angular.module('myApp', []).controller('lose', function($scope, $interval) {
            
            $scope.theTime = new Date().toLocaleTimeString();
            $interval( function() {
                $scope.theTime = new Date().toLocaleTimeString();
            }, 1000);
        })
    </script>
</body>
</html>
View Code

自定义服务/使用自定义服务自定义过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="lose">
        <p>自定义服务：</p>
        <h3>{{hex}}</h3>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.service('hexafy', function(){
            this.myFunc = function(x){
                return x.toString(16);
            }
        });
        app.controller('lose', function($scope, hexafy) {
            $scope.hex = hexafy.myFunc(225);
        });
    </script>
</body>
</html>

<!-- wrong: var myFunc = function(x){return x.toString(16);}   right: this.myFunc -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" >
        <p>自定义过滤：</p>
        <h3>{{255 | myFormat}}</h3>
    </div>
    <script>
        var app = angular.module('myApp', []);

        app.service('hexafy', function(){
            this.myFunc = function(x){
                return x.toString(16);
            }
        });
        app.filter('myFormat', ['hexafy', function(hexafy) {
            return function(x) {
                return hexafy.myFunc(x);
            }
        }]);
    </script>
</body>
</html>

<!-- app.filter('sd',function(){})  :   app.filter('sd',['servc',function(){}])
anonymous function apply
<div ng-app="myApp" ng-controller="lose"> 用不到的控制器，不能放里面会报错-->
View Code

Demo6:select 

这里起没有仔细的做——

ng-options 创建选择框

用ng-repeat 指令来创建下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectNames" ng-options="x for x in names"="x in names"></select> 
        <p>ng-options</p>

        <select>
            <option ng-repeat="x in names">{{x}}</option>
        </select>
        <p>ng-repeat 指令</p>

        <p>数组做对象</p>
        <select ng-model="selectedSite">
            <option  ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
        </select>
        <select ng-model="selectedSite" ng-options="y.site for y in sites"></select>
        <h1>你选择的是:{{selectedSite}}</h1>

        <p>数据源做对象</p>
        <select ng-model="selected" ng-options="x for (x, y) in siteWeb"></select><br><br>

        <select ng-model="selectedCars" ng-options="x for (x, y) in cars"></select>
        <h1>你选择的是: {{selectedCars.brand}}</h1>
        <h2>模型:{{selectedCars.model}}</h2>
        <h3>颜色:{{selectedCars.color}}</h3>

        <select ng-model="selecteCars" ng-options="y.brand for (x, y) in cars"></select>
        <h1>你选择的是: {{selecteCars.brand}}</h1>
        <h2>模型:{{selecteCars.model}}</h2>
        <h3>颜色:{{selecteCars.color}}</h3>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.names = ['tab', 'ctrl', 'shift'];
            $scope.sites = [
                {site: "baidu", url:"http://www.baidu.com"},
                {site: "runoob", url:"http://www.runoob.com"},
                {site: "cnblogs", url:"http://www.cnblogs.com/"}
            ];
            $scope.siteWeb = {
                site01: 'Google',
                site02: 'baidu',
                site03: 'cnblogs',
            };
            $scope.cars = {
                car01: {brand: 'Ford', model: 'Mustang', color: 'red'},
                car02: {brand: 'Flat', model: '500', color: 'blue'},
                car03: {brand: 'Volvo', model: 'XC', color: 'black'},
            };
        });
    </script>
</body>
</html>
View Code

Demo7:table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        table, th , td  {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd) {
            background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <table>
            <tr ng-repeat="x in names | orderBy: 'country'">
                <td>{{$index + 1}}</td>
                <td>{{x.name}}</td>
                <td>{{x.country | uppercase}}</td>
            </tr>
        </table>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("Customers_JSON.php").sunccess(function(response) {
            $scope.names = response.records;
        });
    });
    </script>
</body>
</html>
View Code

Demo8：显示隐藏

ng-disabled ng-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="mySwitch=true">
        <p><button ng-disabled="mySwitch">点我</button></p>
        <p><input type="checkbox" ng-model="mySwitch">按钮</p>
        {{mySwitch}}

        <br>
        <br>

        <p ng-show='true'>我是可见的。</p>
        <p ng-show='false'>我是不可见的。</p>
        <p ng-show='13 > 12'>我是可见的。</p>

        <br>
        <br>
        <p ng-hide='true'>我是不可见的。</p>
        <p ng-hide='false'>我是可见的。</p>
        

    </div>
</body>
</html>

<!-- ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-disable="mySwitch" : ng-disabled="mySwitch"
ng-init="mySwitch=true"-->
View Code

Demo9：事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p><button ng-click='toggle()'>显示/隐藏</button></p>

        <p><button ng-click="count = count + 1">点我！</button></p>
        <p ng-hide='myVar'>{{count}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.count = 0;
            $scope.myVar = false;
            $scope.toggle = function(){
                $scope.myVar = !$scope.myVar;
            }
        });
    </script>
</body>
</html>
View Code

Demo10：模块

模块定义了一个应用程序
模块时应用程序中不同部分的容器
模块是应用控制器的容器
控制器通常属于一个模块

指令构造器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>
View Code

模块和控制器分别在js文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{firstName + " " + lastName}}</p>
    </div>

    <script src="myApp.js"></script>
    <script src="myCtrl.js"></script>
</body>
</html>

//myApp.js
var app = angular.module('myApp', []);
//myCtrl.js
app.controller('myCtrl', function($scope) {
    $scope.firstName = 'Miao';
    $scope.lastName = 'Tab';
});
View Code

Demo11:表单

HTML 表单通常与 HTML 控件(input select button textarea )同时存在。

ng-app="myApp"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

    <div ng-app="myApp" ng-controller="formCtrl">
        <form novalidate>
            First Name: <br>
            <input type="text" ng-model="user.firstName"><br>
            Last Name: <br>
            <input type="text" ng-model="user.lastName"><br><br>

            <button ng-click="reset()">RESET</button>
        </form>
        <p>form={{user}}</p>
        <p>form={{master}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('formCtrl', function($scope) {
            $scope.master = {firstName: "John", lastName: "Doe"};
            $scope.reset = function() {
                $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
        });
    </script>
</body>
</html>
View Code

Demo12:输入验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <h2>验证实例</h2>
    <form  name='myForm' ng-app="myApp" ng-controller="myCtrl" novalidate>
        <p>用户名：<br>
        <input type="text" name='user' ng-model="user" required>
        <span style="color:red" ng-show='myForm.user.$dirty && myFrom.user.$invalid'>
        <span ng-show='myForm.user.$error.required'>用户名是必须的</span>
        </span>
        </p>

        <p>邮箱：<br>
        <input type="email"邮箱验证：<input type="email"> 而不是text name='email' ng-model="email" required>
        <span style="color:red" ng-show='myForm.email.$dirty && myForm.email.$invalid'>
        <span ng-show='myForm.email.$error.required'>邮箱是必须的</span>
        <span ng-show='myForm.email.$error.email'>非法的邮箱地址</span>
        </span>
        </p>

        <p>
            <input type="submit" ng-disabled="myForm.user.$dirty && myFrom.user.$invalid && myForm.email.$dirty && myForm.email.$invalid ">
        </p>
    </form>

    <script >
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.user = 'Daug';
            $scope.email = 'john.doe@gmail.';
        });
    </script>
</body>
</html>

<!-- 校验：span[dirty invalid]>span[required]+span[email]
邮箱验证：<input type="email"> 而不是text -->
View Code

http://www.runoob.com/angularjs/angularjs-validation.html

posted @ 2016-06-27 15:41  miaomiaotab  阅读(227)  评论(0)    收藏  举报