Question

为什么我的应用无法正常使用？它必须在底部显示一个（一次一个）div与＆＃34; ng-if＆＃34;标签.. 这是小提琴：

<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

问题在于showEdit()功能。

你的小提琴你有：

    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()时，它会返回$scope.startEdit && !$scope.startAdd;

但是，$scope.startEdit和$scope.startAdd是函数，因此它们将是＆＃34; truthy＆＃34; （即在布尔表达式中求值为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()不会返回任何内容，因此会评估为undefined。

如果您按照上述说明编辑showEdit()函数并让startEdit()和startAdd()返回布尔表达式，那么您应该很高兴。

Answer 2

看起来你的小提琴有一个错误。如果您将showAdd和showEdit方法更改为以下内容，则会显示编辑div：

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

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

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

另外，请在此处发布您的JavaScript代码。这样，如果你的小提琴发生了什么事情，这个问题可能对其他人有用。

编辑：

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

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

Answer 3

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

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

AngularJS ng-if没有显示DIV

3 个答案: