AngularJS ng-non-bindable 指令AngularJS 实例以下段落不需要使用 AngularJS 来编译： <!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>使用 AngularJS: {{ 5+5 }}</p> <p ng-non-bindable>不使用 AngularJS: {{ 5+5 }}</p></div><p>如果你不想使用 AngularJS 执行表达式可以使用 ng-non-bindable 。...
AngularJS ng-open 指令AngularJS 实例通过点击 checkbox 显示或隐藏 <details> 列表: <!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 ng-app="">点击这里显示 details 列表: <input type="checkbox" ng-model="showDetails"><br> <br><details ng-open="showDetails"><summary>学的不仅是技术，更是梦想！</summary><...
AngularJS ng-options 指令AngularJS 实例使用数组元素填充下拉列表: <!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" ng-controller="myCtrl"><select ng-model="selectedName" ng-options="item for item in names"> </select></div><script> var app = angular.module(myApp, []); app.controll...
AngularJS ng-readonly 指令AngularJS 实例设置输入框为只读: <!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 ng-app=""> 勾选复选框设置输入框为只读:<input type="checkbox" ng-model="all"><br> <br><input type="text" ng-readonly="all"></body> </html> 定义和用法ng-readonly 指令用于设置表单域(input 或 text...
AngularJS ng-paste 指令AngularJS 实例 文本被粘贴时执行表达式: <!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 ng-app=""><input ng-paste="count = count + 1" ng-init="count=0" value="粘贴文本到这!" /><p>粘贴了 {{count}} 次文本。</p><p> 该实例演示了文本在输入框粘贴时，计算变量 "count" 会自动加 1。</p...
AngularJS ng-init 指令AngularJS 实例初始化应用时创建一个变量: <!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="" ng-init="myText=Hello World!"><h1>{{myText}}</h1><p> ng-init 指令创建了 AngularJS 变量，你可以在应用中使用它。</p></div></body> </html> 定义和用法ng-init 指令执行给定的表达式...
AngularJS ng-repeat 指令AngularJS 实例循环输出多个标题: <!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 ng-app="myApp" ng-controller="myCtrl"><h1 ng-repeat="x in records">{{x}}</h1><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) {$scope.records = ["菜鸟教程...
AngularJS ng-selected 指令AngularJS 实例获取选中的选项:点击复选框选择 BMW 选项: <!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 ng-app=""> 点击复选框选择 BMW 选项: <input type="checkbox" ng-model="mySel"><p>我喜欢的车:</p><select><option>Volvo</option><option ng-selected="mySel">BMW</option><optio...
AngularJS ng-include 指令AngularJS 实例包含 HTML 文件: <!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 ng-app=""><div ng-include="myFile.htm"></div></body> </html>运行结果： myFile.htm 文件标题 这个文本来自被包含的文件 myFile.htm! 定义和用法ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为...
AngularJS ng-keyup 指令AngularJS 实例按键松开时执行的代码: <!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 ng-app=""><input ng-keyup="count = count + 1" ng-init="count=0" /><h1>{{count}}</h1><p>该实例在输入框每次按键松开时，计算变量 "count" 会自动加 1。</p></body> </html> 定义和用法ng-keyup 指令用...
AngularJS ng-keydown 指令AngularJS 实例按下按键时执行的代码:<!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 ng-app=""><input ng-keydown="count = count + 1" ng-init="count=0" /><h1>{{count}}</h1><p>该实例在输入框每次按下按键时，计算变量 "count" 会自动加 1。</p></body> </html> 定义和用法ng-keydown 指...
AngularJS ng-include 指令AngularJS 实例 包含 HTML 文件: <!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 ng-app=""><div ng-include="myFile.htm"></div></body> </html> 运行结果： myFile.htm 文件标题 这个文本来自被包含的文件 myFile.htm! 定义和用法ng-include 指令用于包含外...
AngularJS ng-keypress 指令AngularJS 实例按下按键时执行的代码: <!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 ng-app=""><input ng-keypress="count = count + 1" ng-init="count=0" /><h1>{{count}}</h1><p>该实例在输入框每次按下按键时，计算变量 "count" 会自动加 1。</p></body> </html> 定义和用法ng-keypre...
AngularJS ng-list 指令AngularJS 实例转换用户的输入为数组: <!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>在输入框中，输入一些文本，并使用逗号分隔它们：</p><input ng-model="customers" ng-list/><p>当使用 ng-list 指令时，你的输入信息会转换为数组，如下所示：</p><pre>{{customers}}</p...
AngularJS ng-model 指令AngularJS 实例绑定输入框的值到 scope 变量中： <!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" ng-controller="myCtrl"><input ng-model="name"><p>input 输入框的值绑定了变量 "name" :</p> {{name}}</div><script> var app = angular.module(myApp, []); app.controll...