Question

我的问题是关于Angular 1.X中的最佳实践/首选可读性与ng-show和ng-hide。

当使用ng-hide和ng-show时，是否建议坚持一个并交替我正在评估的值，或者我应该在两者之间交替以保持表达式中的值相同？

请参阅以下示例。是一个优先于另一个，如果是这样的原因？

假设只有两种状态，sportSelected可以是曲棍球或足球，所以有两种状态。

仅使用ng-show并切换值

  <div class="col-xs-4" ng-show="vm.sportSelected=='hockey'">
       NJ Devils
    </div>
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'">
       NY Jets
    </div>
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'">
       NY Giants
    </div>

在ng-show和ng-hide之间交替以保持值相同

  <div class="col-xs-4" ng-show="vm.isHockeySelected">
       NJ Devils
    </div>
    <div class="col-xs-4" ng-hide="vm.isHockeySelected">
       NY Jets
    </div>
    <div class="col-xs-4" ng-hide="vm.isHockeySelected">
       NY Giants
    </div>

顶部似乎对我来说更清楚，但可能只是由于方法和变量名称不佳。我正在查看角度文档，我似乎无法得出首选结果。一个人比另一个更受欢迎吗？

编辑：标记为关闭，我意识到这是基于标签与空格的相当意见，即使我认为一种解决方案比其他解决方案有好处

Answer 1

ng-hide和ng-show都以不同的方式运作。它们本质上是CSS类，它们隐藏或显示指定的div，具体取决于值的计算方式。

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

如果myValue的计算结果为true，那么div将是可见的

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

然而，在第二个例子中，当类被设置为ng-hide时，div将被隐藏。

您也可以运行ng-show或ng-hide来检查值是否为false，如下所示：<div ng-show="!myValue"></div>

由于Angular中摘要周期的性质，这些检查将在页面加载时运行。如果您不希望div显示在页面上，建议您使用ng-if，而不是ng-show或ng-hide，因为它不会在页面上加载，因为反对简单地隐藏它。

在下面的代码段中，您会看到一个适用于ng-hide和ng-show的示例，使用输入复选框ng-model值响应的值＆＃39;已选中＆＃39 ;。这给出了boolean响应。

点击后，＆＃39;已选中＆＃39;评估为true。未选中时，该值的计算结果为false。当ng-model评估为false时，它显示ng-hide div，当ng-model评估为true时，它显示ng-show div。

进一步阅读：Angular ng-show documentation

＆＃13;

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
.animate-show {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

.check-element {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
  

  
</head>
<body ng-app="ngAnimate">
  Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
  Show:
  <div class="check-element animate-show" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-show" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>
</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

＆＃13;

Answer 2

您是否使用ng-hide或ng-show应该基于您希望页面默认显示的方式。如果您正在控制默认情况下将隐藏的元素的可见性，并且仅在用户完成某些操作后显示（例如选择一项运动），那么您希望使用ng-show。如果要默认显示该元素并且仅在某些用户操作后隐藏（可能是一个div表示＆＃39;选择一项运动＆＃39;一旦选择了一项运动就会消失），那么您想要使用{{1} }。

使用这种指令会比担心如何指定布尔条件本身更有助于提高可读性。它还具有重要的实际益处。如果你将ng-hide用于默认情况下应该隐藏的内容，那么每次加载页面时都可能会看到元素闪烁，因为在完全评估作用域之前的早期$ digest周期中，结果是条件将是假的，这将导致元素在消失之前短暂出现。

您在顶部示例中找到了正确的想法（看起来您的引号存在语法问题）。

如果在ng-hide和ng-show之间交替使用，或者只使用具有不同值的一个

2 个答案: