我的 Ionic 应用程序中的 ng-if 和 ng-show 都不起作用

Question

html 代码如下所示：

<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>

我也尝试过使用 ng-show，而不是 ng-if。都没有奏效。无论我使用哪一个，约翰和玛格丽特都显示在页面上。我也尝试过使用 ng-switch。

我之前在同一个 HTML 文件中初始化的变量“名称”：

<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>

单击上面的行会转到第 3 页，我需要根据 'name' 的值显示 John 或 Margaret。

是语法错误还是什么，因为这很有可能。我是 Ionic 和 AngularJS 的新手。

Answer 1

我修复了你 plunker - 现在它应该可以工作了。

错误 #1：ng-init 用于初始化，不在运行时设置值 -> 改用 ng-click

错误 #2：您对所有页面使用相同的控制器，但对于每个页面，都会初始化一个新控制器，这会重置“名称”属性

我实现了一个 setName 函数来设置 rootscope 中的名称并转到 page3。在正确的实现中，您应该将名称作为 $stateparam 传递给新的状态/页面。但为此，请查看 ui-router 文档。

  $scope.setName = function(name) {
    console.log(name);
    $rootScope.name = name;
    $state.go('Page3');
  };

Answer 2

你确定你开始使用 Angular 了吗？您是否设置了 ng-app 指令？ 如果您有其他问题，如果您能提供一个可行的示例，将会有所帮助。

angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
  <button type="button" ng-click="name='John'">John</button>
  <button type="button" ng-click="name='Margaret'">Margaret</button>

  <div ng-if="name=='John'">
      This is John
  </div>
  <div ng-if="name=='Margaret'">
    This is Margaret
  </div>
</div>

Answer 3

试试这个：

<div ng-show="name=='John'" ng-init="name = 'John'">
  <div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
  <div class="item item-avatar"> Margaret</div>
</div>  

为我工作。我只是将 ng-if 更改为 ng-show - 当为 true 时将显示 div 内容，否则将其隐藏。我还在 div 中使用 ng-init。