您的位置：首页 > Web前端 > AngularJS

AngularJs练习Demo5

2016-06-21 23:01 429 查看

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index5</title>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
<style>
.red {
background: red;
color: blue;
}

.yellow {
background: yellow;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div ng-class="{red:s,yellow:true}" ng-cloak>{{text}}</div>
<div ng-class="{sClass}" ng-cloak>{{text}}</div>
<div ng-cloak ng-style="{color:'red'}"></div>
<div ng-cloak ng-style="{sStyle}"></div>
<a href="{{url}}">百度</a><br />
<a ng-href="{{url}}"></a><br />
<img src="{{src}}" /><br />
<img ng-src="{{src}}" /><br />
<a ng-href="{{url}}" title="百度" ng-attr-title="{{text}}"></a>

<div ng-show="t">ng-show绑定变量不需要{{}}用的是display的操作</div>

<div ng-if="t">ng-if是dom级的操作直接删除dom</div>

<div ng-switch on="t">
<p ng-switch-default>默认效果</p>
<p ng-switch-when="false">切换的效果
</p>
<p ng-switch-when="true">
切换的效果
</p>
</div>
<div ng-switch on="selection">
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>Default</div>
</div>
<input type="checkbox" ng-model="open"/>
<details id="details" ng-open="open">
<summary>Show/Hide me</summary>
</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.sStyle = "{color:'red',background:'yellow'}";
$scope.url = 'htttp://www.baidu.com';
$scope.src = "";
$scope.t = true;
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航