angular1

来源：互联网发布：九亿娱乐域名编辑：程序博客网时间：2024/06/05 05:04

AngularJS

数字

<div ng-app="" ng-init="quantity=1;cost=5"><p>总价： {{ quantity * cost }}</p></div><div ng-app="" ng-init="quantity=1;cost=5"><p>总价： <span ng-bind="quantity * cost"></span></p></div>

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： {{ firstName + " " + lastName }}</p></div><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p></div>

AngularJS 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 <span ng-bind="person.lastName"></span></p></div>

AngularJS 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div><div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 <span ng-bind="points[2]"></span></p></div>

数据绑定

<div ng-app="" ng-init="quantity=1;price=5"><h2>价格计算器</h2>数量： <input type="number"    ng-model="quantity">价格： <input type="number" ng-model="price"><p><b>总价：</b> {{ quantity * price }}</p></div>

循环数组

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul></div><div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>循环对象：</p><ul>  <li ng-repeat="x    in names">    {{ x.name + ', ' + x.country }}  </li></ul></div>

创建自定义的指令

<body ng-app="myApp"><runoob-directive></runoob-directive><div runoob-directive></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() {    return {        template : "<h1>自定义指令!</h1>"    };});</script></body>

ng-model 指令

<div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你输入了: {{name}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.name = "John Doe";});</script>

验证用户输入

<form ng-app="" name="myForm">    Email:    <input type="email" name="myAddress" ng-model="text">    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form>

状态

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">Email:<input type="email" name="myAddress" ng-model="myText" required><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>

输入变化

<style>input.ng-invalid {    background-color: #ccc;}</style></head><body><form ng-app="" name="myForm">    输入你的名字:    <input name="myName" ng-model="myText" required></form>

scope

<div ng-app="myApp" ng-controller="myCtrl">    <input ng-model="name">    <h1>{{greeting}}</h1>    <button ng-click='sayHello()'>点我</button>   </div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.name = "Runoob";    $scope.sayHello = function() {        $scope.greeting = 'Hello ' + $scope.name + '!';    };});</script>

rootScope

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{lastname}} 家族成员:</h1><ul>    <li ng-repeat="x in names">{{x}} {{lastname}}</li></ul></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $rootScope) {    $scope.names = ["Emil", "Tobias", "Linus"];    $rootScope.lastname = "Refsnes";});</script>

控制器方法

<div ng-app="myApp" ng-controller="personCtrl">名: <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('personCtrl', function($scope) {    $scope.firstName = "John";    $scope.lastName = "Doe";    $scope.fullName = function() {        return $scope.firstName + " " + $scope.lastName;    }});</script>

外部控制器文件

<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{firstName + " " + lastName}}</div><script src="personController.js"></script>personController.jsangular.module('myApp', []).controller('namesCtrl', function($scope) {    $scope.names = [        {name:'Jani',country:'Norway'},        {name:'Hege',country:'Sweden'},        {name:'Kai',country:'Denmark'}    ];});

过滤器

<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p><p>姓名为 {{ lastName | lowercase }}</p><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>总价 = {{ (quantity * price) | currency }}</p></div>

过滤循环

<div ng-app="myApp" ng-controller="namesCtrl"><ul>  <li ng-repeat="x in names | orderBy:'country'">    {{ x.name + ', ' + x.country }}  </li>    <li ng-repeat="x in names | filter:test | orderBy:'country'">    {{ (x.name | uppercase) + ', ' + x.country }}  </li></ul></div>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">姓名: {{ msg | reverse }}</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.msg = "Runoob";});app.filter('reverse', function() { //可以注入依赖    return function(text) {        return text.split("").reverse().join("");    }});</script>

$location

var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $location) {    $scope.myUrl = $location.absUrl();});

$http

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $http) {    $http.get("welcome.htm").then(function (response) {        $scope.myWelcome = response.data;    });});$http.get('/someUrl', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);var app = angular.module('myApp', []);app.controller('siteCtrl', function($scope, $http) {    $http({        method: 'GET',        url: 'https://www.runoob.com/try/angularjs/data/sites.php'    }).then(function successCallback(response) {            $scope.names = response.data.sites;        }, function errorCallback(response) {            // 请求失败执行代码    });});

$timeout

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $timeout) {    $scope.myHeader = "Hello World!";    $timeout(function () {        $scope.myHeader = "How are you today?";    }, 2000);});

$interval

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $interval) {    $scope.theTime = new Date().toLocaleTimeString();    $interval(function () {        $scope.theTime = new Date().toLocaleTimeString();    }, 1000);});

自定义服务

app.service('hexafy', function() {    this.myFunc = function (x) {        return x.toString(16);    }});app.controller('myCtrl', function($scope, hexafy) {    $scope.hex = hexafy.myFunc(255);});

过滤器自定义服务

app.filter('myFormat',['hexafy', function(hexafy) {    return function(x) {        return hexafy.myFunc(x);    };}]);<ul><li ng-repeat="x in counts">{{x | myFormat}}</li></ul>

select

<div ng-app="myApp" ng-controller="myCtrl"><p>选择网站:</p><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你选择的是: {{selectedSite.site}}</h1><p>网址为: {{selectedSite.url}}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {   $scope.sites = [        {site : "Google", url : "http://www.google.com"},        {site : "Runoob", url : "http://www.runoob.com"},        {site : "Taobao", url : "http://www.taobao.com"}    ];});</script>

select repeat

<div ng-app="myApp" ng-controller="myCtrl"><p>选择网站:</p><select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>你选择的是: {{selectedSite}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {   $scope.sites = [        {site : "Google", url : "http://www.google.com"},        {site : "Runoob", url : "http://www.runoob.com"},        {site : "Taobao", url : "http://www.taobao.com"}    ];});</script>

表格

<div ng-app="myApp" ng-controller="customersCtrl"> <table style="border:1px solid red">  <tr ng-repeat="x in names">    <td>{{ x.Name }}</td>    <td>{{ x.Country }}</td>  </tr></table></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {    $http.get("/try/angularjs/data/Customers_JSON.php")    .then(function (result) {        $scope.names = result.data.records;    });});</script>

orderBy uppercase indexodd $even

<table>  <tr ng-repeat="x in names | orderBy : 'Country'">   <td>{{ $index + 1 }}</td>    <td>{{ x.Name }}</td>    <td>{{ x.Country }}</td>    <td>{{ x.Country | uppercase }}</td>    <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>        <td ng-if="$even">{{ x.Name }}</td>        <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>        <td ng-if="$even">{{ x.Country }}</td>  </tr></table>

ng-disabled

<div ng-app="" ng-init="mySwitch=true"><p><button ng-disabled="mySwitch">点我!</button></p><p><input type="checkbox" ng-model="mySwitch"/>按钮</p><p>{{ mySwitch }}</p></div>

show

<div ng-app=""  ng-init="hour=13"><p ng-show="true">我是可见的。</p><p ng-show="false">我是不可见的。</p><p ng-show="hour > 12">我是可见的。</p><p ng-hide="true">我是不可见的。</p><p ng-hide="false">我是可见的。</p>

ng-click

<div ng-app="myApp" ng-controller="myCtrl"><button ng-click="count = count + 1">点我！</button><p>{{ count }}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.count = 0;});</script><form>    Check to show a header:    <input type="checkbox" ng-model="myVar">       选择一个选项:    <input type="radio" ng-model="myVar" value="dogs">Dogs    <input type="radio" ng-model="myVar" value="tuts">Tutorials    <input type="radio" ng-model="myVar" value="cars">Cars    选择一个选项:<select ng-model="myVar">    <option value="">    <option value="dogs">Dogs    <option value="tuts">Tutorials    <option value="cars">Cars</select></form><h1 ng-show="myVar">My Header</h1><div ng-switch="myVar">  <div ng-switch-when="dogs">     <h1>Dogs</h1>     <p>Welcome to a world of dogs.</p>  </div>  <div ng-switch-when="tuts">     <h1>Tutorials</h1>     <p>Learn from examples.</p>  </div>  <div ng-switch-when="cars">     <h1>Cars</h1>     <p>Read about cars.</p>  </div></div>

表单

<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>master = {{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>

表单验证

<p>用户名:<br>  <input type="text" name="user" ng-model="user" required>  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">  <span ng-show="myForm.user.$error.required">用户名是必须的。</span>  </span></p><p>邮箱:<br>  <input type="email" 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 && myForm.user.$invalid ||  myForm.email.$dirty && myForm.email.$invalid"></p></form><script>var app = angular.module('myApp', []);app.controller('validateCtrl', function($scope) {    $scope.user = 'John Doe';    $scope.email = 'john.doe@gmail.com';});</script>

api

    <input type="text" ng-model="myInput" ng-blur="blur()">    <p>输入的内容为：{{myInput}}</p>    <p>变成小写：{{ x1 }}</p>    <p>变成大写：{{ x2 }}</p>  <p ng-switch = "x3">      是不是字符串：      <label ng-switch-when = "true">是</label>      <label ng-switch-when = "false">不是</label>      <label ng-switch-when = ""></label>  </p>    <p ng-switch = "x4">      是不是数字：      <label ng-switch-when = "true">是</label>      <label ng-switch-when = "false">不是</label>      <label ng-switch-when = ""></label>  </p></div>angular.lowercase() 转换字符串为小写angular.uppercase() 转换字符串为大写angular.isString()  判断给定的对象是否为字符串，如果是返回 true。angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.blur = function(){        $scope.x1 = angular.lowercase($scope.myInput);        $scope.x2 = angular.uppercase($scope.myInput);        $scope.x3 = angular.isString($scope.myInput);        // angular.isNumber 这里无效        // $scope.x4 = angular.isNumber($scope.myInput);        $scope.x4 = !isNaN($scope.myInput);    }});</script></body>

与bootstrap整合

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><table class="table table-striped">  <thead>    <tr>      <th>编辑</th>      <th>名</th>      <th>姓</th>    </tr>  </thead>  <tbody>    <tr ng-repeat="user in users">      <td>        <button class="btn" ng-click="editUser(user.id)">          <span class="glyphicon glyphicon-pencil"></span>编辑        </button>      </td>      <td>{{ user.fName }}</td>      <td>{{ user.lName }}</td>    </tr>  </tbody></table><hr><button class="btn btn-success" ng-click="editUser('new')"><span class="glyphicon glyphicon-user"></span>创建新用户</button><hr><h3 ng-show="edit">创建新用户:</h3><h3 ng-hide="edit">编辑用户:</h3><form class="form-horizontal">  <div class="form-group">    <label class="col-sm-2 control-label">名:</label>    <div class="col-sm-10">    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">    </div>  </div>   <div class="form-group">    <label class="col-sm-2 control-label">姓:</label>    <div class="col-sm-10">    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">    </div>  </div>  <div class="form-group">    <label class="col-sm-2 control-label">密码:</label>    <div class="col-sm-10">    <input type="password" ng-model="passw1" placeholder="密码">    </div>  </div>  <div class="form-group">    <label class="col-sm-2 control-label">重复密码:</label>    <div class="col-sm-10">    <input type="password" ng-model="passw2" placeholder="重复密码">    </div>  </div></form><hr><button class="btn btn-success" ng-disabled="error || incomplete"><span class="glyphicon glyphicon-save"></span>修改</button></div><script src="myUsers.js"></script>

包含

跨域包含

<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div><script>var app = angular.module('myApp', [])app.config(function($sceDelegateProvider) {    $sceDelegateProvider.resourceUrlWhitelist([        'http://c.runoob.com/runoobtest/**'    ]);});</script>

动画

<body ng-app="myApp"><h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1><div ng-hide="myCheck"></div><script>var app = angular.module('myApp', ['ngAnimate']);</script>mainApp.constant("configParam", "constant value");// 创建 value 对象 "defaultInput" 并传递数据mainApp.value("defaultInput", 5);

依赖注入factory

   <body>      <h2>AngularJS 简单应用</h2>      <div ng-app = "mainApp" ng-controller = "CalcController">         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>         <button ng-click = "square()">X<sup>2</sup></button>         <p>结果: {{result}}</p>      </div>      <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>      <script>         var mainApp = angular.module("mainApp", []);         mainApp.value("defaultInput", 5);         mainApp.factory('MathService', function() {            var factory = {};            factory.multiply = function(a, b) {               return a * b;            }            return factory;         });         mainApp.service('CalcService', function(MathService){            this.square = function(a) {               return MathService.multiply(a,a);            }         });         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {            $scope.number = defaultInput;            $scope.result = CalcService.square($scope.number);            $scope.square = function() {               $scope.result = CalcService.square($scope.number);            }         });      </script>

依赖注入provider

   <body>      <h2>AngularJS 简单应用</h2>      <div ng-app = "mainApp" ng-controller = "CalcController">         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>         <button ng-click = "square()">X<sup>2</sup></button>         <p>结果: {{result}}</p>      </div>      <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>      <script>         var mainApp = angular.module("mainApp", []);         mainApp.config(function($provide) {            $provide.provider('MathService', function() {               this.$get = function() {                  var factory = {};                  factory.multiply = function(a, b) {                     return a * b;                  }                  return factory;               };            });         });         mainApp.value("defaultInput", 5);         mainApp.service('CalcService', function(MathService){            this.square = function(a) {               return MathService.multiply(a,a);            }         });         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {            $scope.number = defaultInput;            $scope.result = CalcService.square($scope.number);            $scope.square = function() {               $scope.result = CalcService.square($scope.number);            }         });      </script>

路由

<h2>AngularJS 路由应用</h2><ul>    <li><a href="#/">首页</a></li>    <li><a href="#/computers">电脑</a></li>    <li><a href="#/printers">打印机</a></li>    <li><a href="#/blabla">其他</a></li></ul><div ng-view></div><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script><script>    angular.module('routingDemoApp',['ngRoute'])    .config(['$routeProvider', function($routeProvider){        $routeProvider        .when('/',{template:'这是首页页面'})        .when('/computers',{template:'这是电脑分类页面'})        .when('/printers',{template:'这是打印机页面'})        .otherwise({redirectTo:'/'});    }]);</script>$routeProvider.when(url, {    template: string,    templateUrl: string,    controller: string, function 或 array,    controllerAs: string,    redirectTo: string, function,    resolve: object<key, function>});参数说明：template:如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：.when('/computers',{template:'这是电脑分类页面'})templateUrl:如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：$routeProvider.when('/computers', {    templateUrl: 'views/computers.html',});以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。controller:function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。controllerAs:string类型，为controller指定别名。redirectTo:重定向的地址。resolve:指定当前controller所依赖的其他模块。

路由2

<script type="text/javascript">angular.module('ngRouteExample', ['ngRoute']).controller('HomeController', function ($scope, $route) { $scope.$route = $route;}).controller('AboutController', function ($scope, $route) { $scope.$route = $route;}).config(function ($routeProvider) {    $routeProvider.    when('/home', {        templateUrl: 'embedded.home.html',        controller: 'HomeController'    }).    when('/about', {        templateUrl: 'embedded.about.html',        controller: 'AboutController'    }).    otherwise({        redirectTo: '/home'    });});</script></head><body ng-app="ngRouteExample" class="ng-scope">  <script type="text/ng-template" id="embedded.home.html">      <h1> Home </h1>  </script>  <script type="text/ng-template" id="embedded.about.html">      <h1> About </h1>  </script>  <div>     <div id="navigation">        <a href="#/home">Home</a>      <a href="#/about">About</a>    </div>    <div ng-view="">    </div>  </div></body>

应用

<textarea ng-model="message" cols="40" rows="10"></textarea><p><button ng-click="save()">保存</button><button ng-click="clear()">清除</button></p><p>剩余字数: <span ng-bind="left()"></span></p><script src="myNoteApp.js"></script><script src="myNoteCtrl.js"></script>"myNoteApp.js":var app = angular.module("myNoteApp", []);"myNoteCtrl.js":app.controller("myNoteCtrl", function($scope) {    $scope.message = "";    $scope.left  = function() {return 100 - $scope.message.length;};    $scope.clear = function() {$scope.message = "";};    $scope.save  = function() {alert("Note Saved");};});

指令

指令描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-checked 规定元素是否被选中 ng-class 指定 HTML 元素使用的 CSS 类 ng-class-even 类似 ng-class，但只在偶数行起作用 ng-class-odd 类似 ng-class，但只在奇数行起作用 ng-click 定义元素被点击时的行为 ng-cloak 在应用正要加载时防止其闪烁 ng-controller 定义应用的控制器对象 ng-copy 规定拷贝事件的行为 ng-csp 修改内容的安全策略 ng-cut 规定剪切事件的行为 ng-dblclick 规定双击事件的行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件的行为 ng-form 指定 HTML 表单继承控制器表单 ng-hide 隐藏或显示 HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 在应用中包含 HTML 文件 ng-init 定义应用的初始化值 ng-jq 定义应用必须使用到的库，如：jQuery ng-keydown 规定按下按键事件的行为 ng-keypress 规定按下按键事件的行为 ng-keyup 规定松开按键事件的行为 ng-list 将文本转换为列表 (数组) ng-model 绑定 HTML 控制器的值到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时的行为 ng-mouseenter 规定鼠标指针穿过元素时的行为 ng-mouseleave 规定鼠标指针离开元素时的行为 ng-mousemove 规定鼠标指针在指定的元素中移动时的行为 ng-mouseover 规定鼠标指针位于元素上方时的行为 ng-mouseup 规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 在列表中指定 ng-paste 规定粘贴事件的行为 ng-pluralize 根据本地化规则显示信息 ng-readonly 指定元素的 readonly 属性 ng-repeat 定义集合中每项数据的模板 ng-selected 指定元素的 selected 属性 ng-show 显示或隐藏 HTML 元素 ng-src 指定元素的 src 属性 ng-srcset 指定元素的 srcset 属性 ng-style 指定元素的 style 属性 ng-submit 规定 onsubmit 事件发生时执行的表达式 ng-switch 规定显示或隐藏子元素的条件 ng-transclude 规定填充的目标位置 ng-value 规定 input 元素的值

AngularJS 事件

AngularJS 支持以下事件:
ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

AngularJS 验证属性
dirtyinvalid
$error

转换

API 描述 angular.lowercase() 将字符串转换为小写 angular.uppercase() 将字符串转换为大写 angular.copy() 数组或对象深度拷贝 angular.forEach() 对象或数组的迭代函数

比较

API 描述 angular.isArray() 如果引用的是数组返回 true angular.isDate() 如果引用的是日期返回 true angular.isDefined() 如果引用的已定义返回 true angular.isElement() 如果引用的是 DOM 元素返回 true angular.isFunction() 如果引用的是函数返回 true angular.isNumber() 如果引用的是数字返回 true angular.isObject() 如果引用的是对象返回 true angular.isString() 如果引用的是字符串返回 true angular.isUndefined() 如果引用的未定义返回 true angular.equals() 如果两个对象相等返回 true

JSON

API 描述 angular.fromJson() 反序列化 JSON 字符串 angular.toJson() 序列化 JSON 字符串

基础

API 描述 angular.bootstrap() 手动启动 AngularJS angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。 angular.module() 创建，注册或检索 AngularJS 模块

阅读全文

0 0