本文主要是介绍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;
}
}
这篇关于Angular学习（九）——Hidding和Showing的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
