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-if，我也尝试过使用ng-show。都没有奏效。无论我使用哪种，John和Margaret都在页面上显示。我也试过ng-switch。

变量'name'我之前在同一个HTML文件中初始化为：

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

点击上面一行会转到Page3，我需要根据'name'的值显示John或Margaret。

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

Answer 1

试试这个：

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

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

我修复了你plunker - 现在它应该正常工作。

错误＃1：ng-init用于初始化，不在运行时设置值 - ＆gt;请改用ng-click

错误＃2：您为所有页面使用相同的控制器，但是对于每个页面，将初始化一个新的控制器，这将重置名称＆＃39;属性

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

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

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

3 个答案: