应该在 ng-hide 和 ng-show 之间交替使用还是只使用一个具有不同值的

Question

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

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

请参阅以下示例。一个比另一个更受欢迎吗？如果是，为什么？

假设只有两个状态，sportSelected可以是Hockey或者Football就是这样，所以有两个状态。

仅使用 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>

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

编辑：将此标记为关闭，我意识到这是基于制表符与空格的相当不错的意见，尽管我认为一种解决方案比另一种解决方案更有优势

Answer 1

是否使用 ng-hide 或 ng-show 应取决于您希望页面默认显示的方式。如果您要控制默认隐藏且仅在用户完成某些操作（例如选择一项运动）后才显示的元素的可见性，那么您需要使用 ng-show。如果该元素默认显示并且仅在某些用户操作后隐藏（可能 div 说 'select a sport' 一旦选择了一项运动就会消失），那么您想使用 ng-hide .

以这种方式使用指令比担心布尔条件本身的指定方式更有助于提高可读性。它还有一个重要的实际好处。如果你使用 ng-hide 作为默认隐藏的东西，你可能会在每次加载页面时看到元素闪烁，因为在你的范围可以被完全评估之前的早期 $digest 周期中，结果条件将为假，这将导致元素在消失之前短暂出现。

你在上面的例子中的想法是正确的（不过看起来你的引号有语法问题）。

Answer 2

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

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

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

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

但是，在第二个示例中，div 将被隐藏，因为 class 设置为 ng-hide。

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

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

在下面的代码片段中，您将看到一个适用于 ng-hide 和 ng-show 的示例，使用输入复选框 'checked' 的 ng-model 值响应的值.这给出了 boolean 响应。

单击时，'checked' 的值计算为 true。未单击时，该值计算为 false。当 ng-model 评估为 false 时，它显示 ng-hide div，当 ng-model 评估为 true 时，它显示 ng-show div。

进一步阅读：Angular ng-show documentation

@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;
}

<!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
-->

应该在 ng-hide 和 ng-show 之间交替使用还是只使用一个具有不同值的

Should one alternate between ng-hide and ng-show or use only one with different values

readability

angularjs

ng-show

ng-hide