Angular学习（九）——Hidding和Showing

对于菜单栏，内容感知工具和许多其他类似的需要，showing和hiding元素都是一个关键特性。在Angular中我们根据模板中的改变来驱使UI层的改变，并且通过指令将这些改变反射到UI界面中。其中ng-show和ng-hide完成这些工作。ng-show将会显示它所对应的元素当其表达式为TRUE时，隐藏其元素当他为FALSE时。而ng-hide在其值为TRUE时隐藏其所对应的元素，FALSE时显示其对应的元素。

这些指令通过设置元素的style为display:block来显示，设置为display:none来进行相应的隐藏。下面来举例来说明其中的用法。

div ng-controller="DeathrayMenuController">
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show="menuState.show">
<li ng-click="stun()">Stun</li>
<li ng-click="disintegrate()">Disintegrate</li>
<li ng-click="erase()">Erase from history</li>
</ul>
</div>
function DeathrayMenuController($scope){
$scope.menuState.show = false;

$scope.toggleMenu = function(){
$scope.menuState.show = !$scope.menuState.show;
};
}
CSS Classes And Styles

现在我们可以通过利用{{}}插值法的数据绑定来动态的设置classes和style。例如，如果你想要根据条件灰化一些菜单，你可以通过设置下面的场景来进行操作：

设置的css为：

.menu-disabled-true{

color:gray;

}

你可以在上述例子中设置stun函数来为模板灰化：

<div ng-controller="DeathrayMenuController">
<li class="menu-disabled-{{isDisabled}}" ng-click="stun()">Stun</li>

</div>

在相应的函数中设定其中isDiabled的值：

function DeathrayMenuController($scope){
$scope.isDisabled = false;

$scope.stun= function(){
$scope.isDisabled = "true";
};
}

在stun菜单条目中的class中将会设定menu-disabled-加上$scope.idDisabled的值。就像最初设置其值为FALSE，结果将会是menu-disabled-false。然而没有设定CSS与其相对应，所以没有任何效果。当$scope.isDisabled被设置为TRUE时，CSS将变为menu-disabled-true，这将引发相应的CSS，并将文本设置为灰。当在控件的内置style中设置style="{{ some expression }}"的效果是一样的。

其中Angular提供ng-class和ng-style指令，这两个指令都采用一个表达式。这种相同效果的表达式结果可能为:

1、一个空间分割的类的名称的字符串；

2、一个class类数组；

3、一个类名称与布尔值的Map

假如你想在应用头部位置向用户展现相应的警告和操作itshi。利用ng-class指令，你可以如下操作：

_error{ background-color: red; }

_waring{ background-color: yellow; }

<div ng-controller="HeaderController">

<div ng-class="{error:isError,waring:isWaring}">{{messageText}}</div>

……

<button ng-click="showError()">Simulate Error</div>

<button ng-click="showWaring()">Simulate Waring</div>

</div>

function HeaderController($scope){

$scope.isError = fasle;

$scope.isWaring = false;

$scope.showError = function(){

$scope.messageText = "This is an error!";

$scope.isError = true;

$scope.isWaring = false;

}

$scope.showWaring = function(){

$scope.messageText = "Just a warning, Please carry on.";

$scope.isWarning=true;

$scope.isError=false;

};

}

你甚至可以设置表格中所选中行显示高亮。如果我们设置想将用户所选择的表格显示高亮，在CSS中，我们设置高亮的选中行为：

_selected{ background-color: lightgreen;}

在模板中我们设置ng-class为{selected: $index==selectedRow}。这个设置将会使得我们模板中属性selectedRow与ng-repeat的$index相等时，将选中行设置为高亮属性。同时我们也将设置一个ng-click来通知Controller用户所选择的行：

<table ng-controller="TableController">

<tr ng-repeat="restaurant in directory" ng-click="selectedRestaurant($index)" ng-class="{selected:$index==selectedRow}">

<td>{{ restaurant.name}}</td>

<td>{{ restaurant.cuisine}}</td>

</tr>

</table>

function TableController($scope){

$scope.directory = [{name:"The Handsome Heifer",cuisine:"BBO"},

{name:"Green's Green Greens",cuisine:"Salads"},

{name:"House of Fine Fish",cuisine:"Seafood"}];

$scope.selectRestaurant = function(row){

$scope.selectedRow = row;

}

}