Question

所以我的角度应用程序是一个庞然大物，所以我在这里粘贴相关部分只是为了看看SO的Angular Gurus是否能发现任何可以帮助我的东西。

我的HTML代码如下：

<span class='span_class' ng-show='{{showHideBasedOnFlag(id)}}'>
  ...data...
</span>

在Angular，我有：

$scope.showHideBasedOnFlag = function(id)
{

   var flag = getFlag(id);
   if(flag == 1) return true; 
   if(flag == -1) return false;
   return true;
}

我有三个跨度，其中第一个标志为1，所以应该显示，另外两个标志为-1，所以应该隐藏。当页面加载时（第一个跨度显示而其他两个被隐藏），这可以正常工作。但是当我检查第2和第3段时，它们的HTML代码如下所示：

<span class='span_class ng-hide' ng-show="false">

所以我的第一个问题是：ng-hide是否正常加入Angular以及ng-show是否也存在？当我在HTML

中使用代码ng-show='{{showHideBasedOnFlag(id)}}'时，两者都会被添加

其次，更重要的是：我有一个按钮，单击该按钮时，将第2和第3行的标志更新为1的值。在这种情况发生后，我预计会显示跨度，但他们没有。然后，我显式调用showHideBasedOnFlag函数和console.logged以确保函数返回正确的true和false。但是我的HTML DOM没有变化，并且跨度仍然隐藏。

我正在打破这个问题，并且已经没有想法......任何帮助都非常感谢!!

Answer 1

您使用双括号进行插值。但是ng-show不是插值的指令，它是基于truthy / falsy的。因此，你需要一个功能，到目前为止一切顺利。但是在Angular 1.x中，指令传递了一个没有双括号的函数。

<span class='span_class' ng-show='showHideBasedOnFlag(id)'>
  ...data...
</span>

所以我的第一个问题是：ng-hide加入是否正常角度以及ng-show也存在？两者都在增加当我在我的代码中使用代码ng-show ='{{showHideBasedOnFlag（id）}}'时添加 HTML

是的，这是正常行为，因为ng-show和ng-hide是使用元素的visibility属性的互补开关，而ng-if完全从DOM添加或删除元素。

Answer 2

当您将函数包含在{{}}中时，它的第一次解析为false（或任何初始值），因为这是表达式语法的用法。 ng-show/ng-hide期望的是true或false的表达式，因此最好使用函数或根据条件在内部更改的变量。

见下面的例子以供参考。

function TodoCtrl($scope) {
  $scope.id;
  
  $scope.showHideBasedOnFlag = function(id) {
    var flag = getFlag(id);
    if (flag == 1) return true;
    if (flag == -1) return false;
    return true;
  }

  function getFlag(id) {
    return id; // just simulation
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <h2>Todo</h2>
  <input placeholder="Enter 1 to show -1 to hide" ng-model="id">
  <div ng-controller="TodoCtrl">
    <span class='span_class' ng-show='showHideBasedOnFlag(id)'>
  ...data...
</span>
  </div>
</div>

Angular ng-show不会根据函数返回值显示/隐藏

2 个答案: