初學AngularJS：myAngularJSHtml
阿新 • • 發佈：2019-02-06
<!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>