<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> <style> .red{ background:red; color:blue;} .yellow{ background:yellow;} </style> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div ng-cloak ng-class="{red:s}">{{text}}</div> <div ng-cloak ng-class="{{sClass}}">{{text}}</div> <div ng-cloak ng-style="{color:'red'}">{{text}}</div> <div ng-cloak ng-style="{{style}}">{{text}}</div> <a href="{{url}}">百度1</a> <a ng-href="{{url}}">百度</a> <img src="{{src}}" /> <img ng-src="{{src}}" /> <br> <br> <a ng-href="{{url}}" ng-attr-title="{{text}}">百度</a> <br> <br> <div ng-show="s">你好</div> //dispaly显示隐藏 <br> <br> <div ng-if="s">你好</div> //dom的移除和没有移除 <div ng-switch on="s"> <p ng-switch-default>默认的效果</p> <p ng-switch-when="false">false切换的效果</p> <p ng-switch-when="true">true切换的效果</p> </div> <br> <br> <div class="animate-switch-container" ng-switch on="selection"> <div class="animate-switch" ng-switch-when="settings">Settings Div</div> <div class="animate-switch" ng-switch-when="home">Home Span</div> <div class="animate-switch" ng-switch-default>default</div> </div> <input type="checkbox" ng-model="open"><br/> <details id="details" ng-open="open"> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.text='phonegap中文网'; $scope.s=true; $scope.sClass = "{red:true,yellow:true}"; $scope.style = "{color:'red',background:'yellow'}"; $scope.url='http://www.baidu.com'; $scope.src='http://www.baidu.com/img/bdlogo.png'; // $scope.style = "{color:'red',background:'yellow'}"; // $scope.sClass = "{red:true,yellow:true}"; // $scope.url = "http://www.baidu.com"; $scope.items = ['settings', 'home', 'other']; $scope.selection = $scope.items[0]; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div ng-click="run()">点击</div> <div ng-bind="text"></div> //绑定多个 <div ng-bind-template="{{text}} {{name}}"></div> //1.引入angular-sanitize，2.依赖['ngSanitize'] <div ng-bind-html="text2"></div> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", ['ngSanitize']); app.controller('firstController',function($scope){ $scope.text='phonegap中文网'; $scope.name='中文网'; $scope.text2='<h2>这是h2</h2>'; $scope.run=function(){ alert('run'); console.log('run'); } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../angular.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <div ng-repeat="innerList in list" ng-init="outerIndex = $index"> <div ng-repeat="value in innerList" ng-init="innerIndex = $index"> <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span> </div> </div> <input type="text" ng-model="name" ng-model-options="{ updateOn: 'blur' }" /> {{name}} </div> </div> <script type="text/javascript"> var app = angular.module("myApp", ['ngSanitize']); app.controller('firstController',function($scope){ $scope.list = [['a', 'b'], ['c', 'd']]; }); </script> </body> </html>