在 Angular 中，我们可以使用 ng-show 指令来控制数据的显示与隐藏。这个指令非常方便，可以节省我们在 JavaScript 中编写逻辑的时间，使代码更简洁、易懂。
ng-show 的用法
在 Angular 中，我们可以使用 ng-show 指令来根据表达式的真假来显示或隐藏元素。指令的基本用法如下：
<div ng-show="condition">要显示的内容</div>
其中，condition 是一个表达式，如果表达式结果为真，该元素将显示出来；如果表达式结果为假，该元素将隐藏起来。
我们还可以在表达式中使用 Angular 的变量或函数，比如：
<div ng-show="isShow()">要显示的内容</div>
这里我们使用了 isShow() 函数来返回表达式的真假值。
ng-show 的高级用法
除了基本的用法，ng-show 还有一些高级用法，可以让我们更灵活地控制元素的显示与隐藏。
ng-show 和 ng-hide 的联合使用
我们可以使用 ng-hide 指令来在 ng-show 指令的条件不满足时隐藏元素，如下所示：
<div ng-show="condition" ng-hide="!condition">要显示的内容</div>
这样，即使条件不满足时，元素也不会完全消失，而是变成了一个空白的区域，保证页面布局的稳定性。
ng-show 和 ng-if 的区别
和 ng-show 类似的还有 ng-if 指令，两者的主要区别在于，ng-show 只是控制元素的显示与隐藏，而 ng-if 则是真正地将元素从 DOM 中移除或插入，这样可以减少不必要的 DOM 操作，提高性能。
<div ng-if="condition">要显示的内容</div>
ng-show 和 ng-switch 的组合
我们可以使用 ng-switch 指令来实现根据条件动态显示不同的内容，这个时候就可以用到 ng-show 来控制元素的显示与隐藏了。
<div ng-switch="condition"> <div ng-switch-when="a" ng-show="subConditionA">要显示的内容 A</div> <div ng-switch-when="b" ng-show="subConditionB">要显示的内容 B</div> <div ng-switch-default>要显示的默认内容</div> </div>
示例代码
下面是一个简单的示例，展示了如何使用 ng-show 指令控制数据的显示与隐藏：
// javascriptcn.com 代码示例
<div ng-controller="myCtrl">
<button ng-click="toggle()">Toggle</button>
<div ng-show="showData">{{data}}</div>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.data = '这是要显示的数据';
$scope.showData = false;
$scope.toggle = function() {
$scope.showData = !$scope.showData;
}
})
</script>我们在控制器中定义了一个变量 $scope.showData，用来控制数据的显示与隐藏。在视图中，我们使用了 ng-show 指令，以 $scope.showData 作为表达式来判断是否显示数据。点击按钮时，我们调用了 $scope.toggle() 函数来改变 $scope.showData 的值，从而控制数据的显示与隐藏。
总结
ng-show 指令是一个非常方便的指令，可以帮助我们简化代码，增强代码的可读性和可维护性。我们需要根据实际需求选择合适的使用方式，尽量减少 DOM 操作，提高性能，让我们的网页更加流畅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f37817d4982a6eb04a3ce