AngularJS ng-if 不显示 DIV

Question

为什么我的应用无法正常运行？它必须在底部显示一个（一次一个）div 和 "ng-if" 标签。这是 fiddle:

<div class="fix" ng-if="showAdd()">
  <button type="button" class="btn btn-link">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>
<div class="edit" ng-if="showEdit()">
Modifica
</div>

Answer 1

如果希望始终显示一个或另一个，那么最好按如下方式构建视图：

<div class="fix" ng-if="showingAdd">
  <button type="button" class="btn btn-link">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>
<div class="edit" ng-if="!showingAdd">
Modifica
</div>

Answer 2

问题出在 showEdit() 函数上。

从你的fiddle你有：

    function showEdit() {
        return $scope.startEdit && !$scope.startAdd;
    }

其中 startEdit 和 startAdd 定义为：

    function startAdd() {
        $scope.addBookmark = true;
        $scope.editBookmark = false;
    }


    function startEdit() {
        $scope.editBookmark = true;
        $scope.addBookmark = false;
    }

当你的 ng-if 调用 showEdit() 时，它将 return $scope.startEdit && !$scope.startAdd;

然而，$scope.startEdit 和 $scope.startAdd 是函数，因此它们将是 "truthy"（即在布尔表达式中计算为 true）。因此，布尔表达式的计算结果始终为 false（并且您的 DIV 保持隐藏状态）。

见下文：

$scope.startEdit && !$scope.startAdd;
true && !true
true && false
false

看起来您在调用函数或计算布尔表达式时缺少概念性的东西。

如果你想调用一个 JavaScript 函数，你必须在函数名后面加上括号，就像你对 ng-if="showEdit()" 块所做的那样。

同样，如果 $scope.showEdit() 是要调用 startAdd() 和 startEdit()，你应该这样做：

    function showEdit() {
        return $scope.startEdit() && !$scope.startAdd();
    }

但是，您仍然有问题，因为 startEdit() 和 startAdd() 没有 return 任何东西，因此会计算为 undefined。

如果您如上所述编辑 showEdit() 函数并且有 startEdit() 和 startAdd() return 布尔表达式，您应该可以开始了。

Answer 3

您的 fiddle 似乎有误。如果您将 showAdd 和 showEdit 方法更改为以下内容，则会显示编辑 div：

function showAdd() {
    return $scope.addBookmark && !$scope.editBookmark;
}

function showEdit() {
    return $scope.editBookmark && !$scope.addBookmark;
}

add div 永远不会被添加，因为它将被 startAdd 函数激活，而该函数不会在任何地方被调用。

另外，请 post 您的 javascript 代码在这里。这样，如果您的 fiddle 出了什么问题，这个问题可能对其他人仍然有用。

编辑：

要使添加按钮起作用，您需要更改此设置：

<div class="fix" ng-if="showAdd()">
  <button type="button" class="btn btn-link">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>

为此：

<button type="button" class="btn btn-link" ng-click="startAdd()">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
<div class="fix" ng-if="showAdd()">
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>

AngularJS ng-if 不显示 DIV

AngularJS ng-if doesn't show the DIV

angularjs

angular-ng-if