<!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>
时间： 2024-10-28 05:43:07