<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS指令学习</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
<style>
.sky{
background-color: lightblue;
padding: 10px;
font-weight: bolder;
}
.tomato{
color: white;
background-color: lightcoral;
padding: 10px;
font-family: Verdana;
font-weight: bolder;
}
.font-tomato{
color: lightcoral;
font-family: Verdana;
font-size: 20px;
font-weight: bolder;
}
.panel-default{
height: 350px;
overflow: auto;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-sm-6 col-md-2 panel panel-default">
<p>名字：<input type="text" ng-model="name"></p>
<h>Hello {{name}}</h>
<p>我的第一个表达式：{{5+5}}</p>
<h3>ng-bind-html</h3>
<p ng-bind-html="myText1"></p>
<p ng-bind-html="9+13"></p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-app</h3>
<p>My name：{{firstName+" "+lastName}}</p>
<h3 ng-init="myText='Hello World!!!'">ng-bind</h3>
<p ng-bind="myText"></p>
<p ng-bind="5*10"></p>
<p class="ng-bind:myText"></p>
<p class="ng-bind:5+10"></p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-bind-template、ng-class</h3>
<p ng-class="'tomato'" ng-bind-template="{{firstWord}} {{lastWord}}"></p>
<div ng-controller="myCtrl2">
<h3>ng-controller</h3>
<p ng-class="'tomato'" ng-bind-template="{{firstWord}} {{lastWord}}"></p>
</div>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-repeat、ng-class-even、ng-class-odd</h3>
<a ng-repeat="x in records">{{x}}、</a>
<table border="1" cellspacing="0">
<tr ng-repeat="x in cities" ng-class-even="'tomato'">
<td>{{x.Name}}</td><td>{{x.Country}}</td>
</tr>
</table><br>
<table border="1" cellspacing="0">
<tr ng-repeat="(x, y) in myObj" ng-class-odd="'sky'">
<td>{{x}}</td><td>{{y}}</td>
</tr>
</table>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-blur</h3>
<input ng-blur="count=count+1" ng-init="count=0">
<textarea ng-blur="aVal=aVal+5" ng-init="aVal=24">切换变值</textarea>
<h3>{{count}}---{{aVal}}-==={{va1}}</h3>
<h3>ng-change</h3>
<input ng-change="myFunc1()"ng-model="myValue">
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-class、ng-cloak</h3>
<select ng-model="home">
<option value="sky">天空色</option><option value="tomato">番茄色</option>
</select>
<p> <span ng-class="'font-tomato'">ng-cloak </span>指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。</p>
<pre ng-class="home" ng-cloak>
入夜渐微凉 繁花落地成霜</pre>
<h3>ng-checked</h3>
<input type="checkbox" ng-model="all">全选<br>
<input type="checkbox" ng-checked="aVal==24">篮球<input type="checkbox" ng-checked="all">足球<input type="checkbox" ng-checked="all">乒乓球
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-click、ng-copy、ng-focus、ng-paste</h3>
<button class="btn btn-info" ng-click="btnClick=btnClick+1" ng-init="btnClick=0">点击</button>
<h3 ng-copy="copyText=copyText+1" ng-init="copyText=0">拷贝该文本</h3>
<input ng-click="focusCount=focusCount+1" ng-init="focusCount=0;cutCount=0" ng-cut="cutCount=cutCount+1" value="剪切该文本">
<input ng-paste="pasteCount=pasteCount+1" ng-init="pasteCount=0" value="粘贴文本到这!">
<div>
<span>按钮被点击了<span ng-class="'font-tomato'">{{btnClick}}</span>次、</span>
<span>文本被拷贝了<span ng-class="'font-tomato'">{{copyText}}</span>次、</span>
<span>文本框聚焦了<span ng-class="'font-tomato'">{{focusCount}}</span>次、</span>
<span>文本被剪切了<span ng-class="'font-tomato'">{{cutCount}}</span>次、</span>
<span>文本框被粘贴了<span ng-class="'font-tomato'">{{pasteCount}}</span>次、</span>
</div>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3 ng-init="myHref='http://www.runoob.com'">ng-hide、ng-href、ng-if</h3>
<input type="checkbox" ng-model="isHide">
<div ng-hide="isHide">
<p>Welcome !!!</p>
<p>访问<a ng-href="{{myHref}}">{{myHref}}</a>学习！！！</p>
</div>
<p ng-if="isHide" ng-class="'font-tomato'">隐藏div元素！</p>
<h3>ng-list</h3>
<input ng-model="customers" ng-list=".">
<p>ng-list="":可选,定义分隔符，默认为", "</p>
<p>ng-list数组：{{customers}}</p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-include</h3>
<div ng-include="'myFile.txt'"></div>
<ng-include src="'myFile.txt'"></ng-include>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-keydown、ng-keypress、ng-keyup</h3>
<input ng-keydown="keydownCount=keydownCount+1" ng-init="keydownCount=0;keypressCount=0;keyupCount=0">
<input ng-keypress="keypressCount=keypressCount+1">
<input ng-keyup="keyupCount=keyupCount+1">
<p>ng-keydown按键按了<span ng-class="'font-tomato'">{{keydownCount}}</span>次</p>
<p>ng-keypress按键按了<span ng-class="'font-tomato'">{{keypressCount}}</span>次</p>
<p>ng-keyup按键松开了<span ng-class="'font-tomato'">{{keyupCount}}</span>次</p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-model-options</h3>
<p>失去焦点：<input ng-model="optionVal" ng-model-options="{updateOn:'blur',debounce :'5000'}">：{{optionVal}}</p>
<!--<p>等待：<input ng-model="optionVal" ng-model-options="{debounce :'5000'}">：{{optionVal}}</p>-->
<!--<p>是否验证：<input ng-model="optionVal" ng-model-options="{allowInvalid :'true'}">：{{optionVal}}</p>-->
<!--<p>使用时区：<input ng-model="optionVal" ng-model-options="{timezone :'0100'}">：{{optionVal}}</p>-->
<h3>ng-non-bindable</h3>
<p>使用AngularJS：{{13+9}}</p>
<p ng-non-bindable>不使用AngularJS：{{13+9}}</p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-mousedown/mouseenter/mouseleave/mousemove/mouseover/mouseup</h3>
<p><span ng-mousedown="mousedowncount=mousedowncount+1" ng-init="mousedowncount=0">按下鼠标按键：</span>{{mousedowncount}}</p>
<p><span ng-mouseenter="mouseentercount=mouseentercount+1" ng-init="mouseentercount=0">鼠标指针穿过：</span>{{mouseentercount}}</p>
<p><span ng-mouseleave="mouseleavecount=mouseleavecount+1" ng-init="mouseleavecount=0">鼠标指针离开：</span>{{mouseleavecount}}</p>
<p><span ng-mousemove="mousemovecount=mousemovecount+1" ng-init="mousemovecount=0">鼠标指针移动：</span>{{mousemovecount}}</p>
<p><span ng-mouseover="mouseovercount=mouseovercount+1" ng-init="mouseovercount=0">鼠标指针位于：</span>{{mouseovercount}}</p>
<p><span ng-mouseup="mouseupcount=mouseupcount+1" ng-init="mouseupcount=0">松开鼠标按钮：</span>{{mouseupcount}}</p>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-open</h3>
<p>点击这里显示<span ng-class="'font-tomato'"> details </span>列表:<input type="checkbox" ng-model="showDetail"></p>
<details ng-open="showDetail">
<summary>学的不仅是技术，更是梦想！</summary>
<p>--Java</p><p>--HTML</p><p>--JavaScript</p>
</details>
<h3>ng-options</h3>
<select ng-model="selectMyOpt" ng-options="item for item in options"></select>
<h3>ng-readonly</h3>
<input type="checkbox" ng-model="readonlyInput"/><input type="text" ng-readonly="readonlyInput">
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-selected</h3>
<input type="checkbox" ng-model="selectedInput"/>
<select>
<option>Volvo</option><option ng-selected="selectedInput">BMW</option><option>Ford</option>
</select>
<h3>ng-show</h3>
<input type="checkbox" ng-model="showInput"/>
<div ng-show="showInput">
你说你有点难追 想让我知难而退
礼物不需挑最贵 只要香榭的落叶
</div>
<h3>ng-src、srcset</h3>
<div ng-init="myImg='http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg'">
<img ng-src="{{myImg}}" style="width: 100px;height: 100px;"><img ng-srcset="{{myImg}}" style="width: 100px;height: 100px;">
</div>
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-style</h3>
<div ng-style="myStyle">梦随风万里 几度红尘来去 人面桃花长相忆 又是一年春华成秋碧 </div>
<h3>ng-submit</h3>
<form ng-submit="mySubmit()">
<input type="text"><button class="btn btn-info">点击提交</button>
</form>
<p>{{mySubTxt}}</p>
<h3>ng-value</h3>
<input ng-value="myValue">
</div>
<div class="col-sm-6 col-md-2 panel panel-default">
<h3>ng-switch</h3>
<select ng-model="switchVal">
<option value="runoob">www.runoob.com<option value="google">www.google.com<option value="taobao">www.taobao.com
</select>
<div ng-switch="switchVal">
<div ng-switch-when="runoob">
<h1>菜鸟教程</h1><p>欢迎访问菜鸟教程</p>
</div>
<div ng-switch-when="google">
<h1>Google</h1><p>欢迎访问Google</p>
</div>
<div ng-switch-when="taobao">
<h1>淘宝</h1><p>欢迎访问淘宝</p>
</div>
<div ng-switch-default>
<h1>切换</h1><p>选择不同选项显示对应的值。</p>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("myApp",['ngSanitize']);
app.controller("myCtrl", function($scope){
$scope.name = "张琳";
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myText1 = "My name is <h5>John Doe</h5>";
$scope.firstWord = "John";
$scope.lastWord = "Doe";
$scope.records = ["java", "HTML", "angularJS", "jQuery", "JavaScript"];
$scope.cities = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
];
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
};
$scope.va1 = 19;
$scope.optionVal = "三生";
$scope.options = ["Alfreds Futterkiste","Germany","Berglunds snabbköp","Austria", "JavaScript"];
$scope.myFunc1 = function(){
$scope.va1++;
};
$scope.myStyle = {
"color":"white",
"background-color":"coral",
"font-size":"18px",
"padding":"10px"
};
$scope.mySubTxt = "你还没有点击提交！";
$scope.mySubmit = function(){
$scope.mySubTxt = "你点击了提交！";
};
$scope.myValue = "网站建设";
});
app.controller("myCtrl2", function($scope){
$scope.firstWord = "John2";
$scope.lastWord = "Doe2";
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
