ng-show 和 ng-if 无法显示内容答案

【问题标题】：ng-show and ng-if fail to display contentng-show 和 ng-if 无法显示内容
【发布时间】：2014-12-29 23:39:26
【问题描述】：

尝试构建一个简单的标签。 Tab 0 中的内容按预期显示和隐藏，但是 Tab 1 永远是空白的，尽管单击 Tab 1 时范围会更新为 true。

首先，控制器在包装器 div 上启动：

<div ng-controller="AdvancedSettingsController as settings">

这是控制器：

function AdvancedSettingsController($scope) {

    //setting tab name, and initial booleans
    $scope.tab = [
        {
            title : "Domains",
            active : true
        },
        { 
            title: "Locale",
            active : false 
        }
    ];

}

还有 ng-click 监听器：

AdvancedSettingsController.prototype.tabs = function (o) {
    //set both tab active booleans to false
    for (var i = 0; i <= $scope.tab.length - 1; i++) {
        $scope.tab[i].active = false;
    }

    //set active tab boolean to true
    $scope.tab[o].active = true;

}

现在，使用 ng-repeat 循环的选项卡对象 - settings.tabs($index) 正在将索引传递给上面的函数：

<li data-ng-repeat="tab in settings.tab">
   <a data-ng-click="settings.tabs($index)">
      {{tab.title}}
   </a>
</li>

内容保存在 2 个 div 中，带有 ifs：

<div data-ng-if="settings.tab[0].active">
   Content 1, true by default. Hides and shows as nav is toggled.
</div>

<div data-ng-if="settings.tab[1].active">
   Content 2, false by default. Never shows as nav is toggled.
</div>

最后，Chrome 从不更新 if： ngIf: settings.tab[1].active

【问题讨论】：

标签： javascript angularjs ng-show angular-ng-if

【解决方案1】：

在您的 html 中，您尝试通过 settings.tab 和 settings.tabs 访问数据，但我看不到您在哪里定义了这些设置...

按照您在此处发布的代码，我创建了此解决方案：http://codepen.io/anon/pen/raMbGr

<li ng-repeat="t in tab">
  <a ng-click="tabs($index)">
    {{t.title}}
  </a>
</li>

<div ng-if="tab[0].active">
  Content 1, true by default. Hides and shows as nav is toggled.
</div>

<div ng-if="tab[1].active">
  Content 2, false by default. Never shows as nav is toggled.
</div>

【讨论】：

设置是在包装 div 中建立的，使用 ng-controller="AdvancedSettingsController as settings"。我所看到的是代码在理论上是正确的 - 但是还有其他原因导致我的困境。我们有一个非典型的角度设置，我想知道它对此有多大影响。我注意到在我公司的 Angular 部署中没有按预期工作的其他一些棘手的事情（请参阅关于 ng-template 的非相关帖子：stackoverflow.com/questions/27629290/…）。也许我会开始一个单独的线程。谢谢！

【解决方案2】：

我的问题的答案在这里并不明显，我的第一个选项卡中有一个额外的结束 div。它关闭了 ng-if，然后出现了损坏的标记。

我的代码如下所示：

<div ng-if="tab[0].active">
   <div>
      Content 1, true by default. Hides and shows as nav is toggled.
   </div>
   **</div>**
</div>

<div ng-if="tab[1].active">
  Content 2, false by default. Never shows as nav is toggled.
</div>

ng-if 没有在正确的位置关闭 - 所以尽管 $scope 更新了，html 还是坏了。所以。烦人。

【讨论】：