<!DOCTYPE html>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>angular demo</title>
<script src=
"http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"
></script>
</head>
<body>
<div id=
"App1"
ng-app=
"shoppingCart"
ng-controller=
"ShoppingCartController"
>
<h1>Your demo</h1>
<!-- demo 1 -->
<div ng-show=
'menuState.show'
>another another another</div>
<button ng-click=
"test2()"
>切换</button>
<hr><!-- demo 2 -->
<style type=
"text/css"
>
.menu-disabled-
true
{
opacity:1;
color: red;
-webkit-transition:all 1000ms linear;
-moz-transition:all 1000ms linear;
-o-transition:all 1000ms linear;
}
.menu-disabled-
false
{
opacity: 0;
-webkit-transition:all 1000ms linear;
-moz-transition:all 1000ms linear;
-o-transition:all 1000ms linear;
}
</style>
<div class=
"menu-disabled-{{isDisabled}}"
>adfadfadasda</div>
<button ng-click=
"test()"
>隐藏</button>
<button ng-click=
"test1()"
>显示</button>
<button ng-click=
"test11()"
>切换</button>
<hr><!-- demo 3 -->
<style type=
"text/css"
>
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<div ng-class=
'{error:isError, warning:isWarning}'
>{{messageText}}</div>
<button ng-click=
"showError()"
>error</button>
<button ng-click=
"showWarning()"
>warning</button>
<hr><!-- demo 4 -->
<style type=
"text/css"
>
.selected{
background-color: lightgreen;
}
</style>
<div ng-repeat=
"item in items"
ng-class=
'{selected:$index==selectedRow}'
ng-click=
'selectedWhich($index)'
>
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
</div>
</div>
<script>
var
shoppingCartModule = angular.module(
"shoppingCart"
, [])
shoppingCartModule.controller(
"ShoppingCartController"
,
function
($scope) {
$scope.menuState = {
'show'
:
true
};
$scope.test2 =
function
() {
$scope.menuState.show = !$scope.menuState.show;
};
$scope.isDisabled =
true
;
$scope.test =
function
() {
$scope.isDisabled =
'false'
;
};
$scope.test1 =
function
() {
$scope.isDisabled =
'true'
;
};
$scope.test11 =
function
() {
$scope.isDisabled = !$scope.isDisabled;
};
$scope.isError =
false
;
$scope.isWarning =
false
;
$scope.messageText =
'default, default'
;
$scope.showError =
function
() {
$scope.messageText =
'This is an error'
;
$scope.isError =
true
;
$scope.isWarning =
false
;
};
$scope.showWarning =
function
() {
$scope.messageText =
'Just a warning, donot warry'
;
$scope.isWarning =
true
;
$scope.isError =
false
;
};
$scope.items = [
{ product_name:
"Product 1"
, price: 50 },
{ product_name:
"Product 2"
, price: 20 },
{ product_name:
"Product 3"
, price: 180 }
];
$scope.selectedWhich =
function
(row) {
$scope.selectedRow = row;
}
}
);
</script>
</body>
</html>