AngularJS的一些基本样式初窥
显示和隐藏
在Angular中的一切，都是基于模型的改变，进而通过标识符反映这些变化到界面上。
ng-show和ng-hide可以做相同的事情。显示和隐藏是基于你传递给他们的表达式而定，即，当表达式为true时，ng-show就显示，反之隐藏。当表达式为true时，ng-hide就隐藏，反之显示。这些标识符是通过设置元素的样式display:block显示和display:none隐藏进行工作的。
CSS类和样式
通过{{}}解析来进行数据绑定，从而能够动态地设置类和样式。
ng-class和ng-style
在大型项目中，上面的方式会使得难以管理，以至于不得不同时阅读模版和JavaScript才能正确地创建css。
Angular提供了ng-class和ng-style标识符。他们每一个都需要一个表达式。表达式执行的结果可能是下列之一：
- 一个字符串，表示空间隔开的类名。
- 一个类名数组
- 一个类名到布尔值的映射
选中的行
模版中，我们设置ng-class的值为{selected:$index==selectedRow}，当模型调用selectedRow时将匹配ng-repeat的$index，进而显示选中的样式。同样我们设置ng-click来通知控制器用户点了哪一行。
src和href建议
建议使用ng-src和ng-href。
<imgng-src="/img/01.png"> <ang-href="www.segmentfault.com">segmentfault</a>
所有源码
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angulardemo</title>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"></script>
</head>
<body>
<divid="App1"ng-app="shoppingCart"ng-controller="ShoppingCartController">
<h1>Yourdemo</h1>
<!--demo1-->
<divng-show='menuState.show'>anotheranotheranother</div>
<buttonng-click="test2()">切换</button>
<hr><!--demo2-->
<styletype="text/css">
.menu-disabled-true{
opacity:1;
color:red;
-webkit-transition:all1000mslinear;
-moz-transition:all1000mslinear;
-o-transition:all1000mslinear;
}
.menu-disabled-false{
opacity:0;
-webkit-transition:all1000mslinear;
-moz-transition:all1000mslinear;
-o-transition:all1000mslinear;
}
</style>
<divclass="menu-disabled-{{isDisabled}}">adfadfadasda</div>
<buttonng-click="test()">隐藏</button>
<buttonng-click="test1()">显示</button>
<buttonng-click="test11()">切换</button>
<hr><!--demo3-->
<styletype="text/css">
.error{
background-color:red;
}
.warning{
background-color:yellow;
}
</style>
<divng-class='{error:isError,warning:isWarning}'>{{messageText}}</div>
<buttonng-click="showError()">error</button>
<buttonng-click="showWarning()">warning</button>
<hr><!--demo4-->
<styletype="text/css">
.selected{
background-color:lightgreen;
}
</style>
<divng-repeat="iteminitems"ng-class='{selected:$index==selectedRow}'ng-click='selectedWhich($index)'>
<span>{{item.product_name}}</span>
<span>{{item.price|currency}}</span>
</div>
</div>
<script>
varshoppingCartModule=angular.module("shoppingCart",[])
shoppingCartModule.controller("ShoppingCartController",
function($scope){
//demo1
$scope.menuState={'show':true};
$scope.test2=function(){
$scope.menuState.show=!$scope.menuState.show;
};
//demo2
$scope.isDisabled=true;
$scope.test=function(){
$scope.isDisabled='false';
};
$scope.test1=function(){
$scope.isDisabled='true';
};
$scope.test11=function(){
$scope.isDisabled=!$scope.isDisabled;
};
//demo3
$scope.isError=false;
$scope.isWarning=false;
$scope.messageText='default,default';
$scope.showError=function(){
$scope.messageText='Thisisanerror';
$scope.isError=true;
$scope.isWarning=false;
};
$scope.showWarning=function(){
$scope.messageText='Justawarning,donotwarry';
$scope.isWarning=true;
$scope.isError=false;
};
//demo4
$scope.items=[
{product_name:"Product1",price:50},
{product_name:"Product2",price:20},
{product_name:"Product3",price:180}
];
$scope.selectedWhich=function(row){
$scope.selectedRow=row;
}
}
);
</script>
</body>
</html>