<!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>
)
