Html 我的 Ionic 应用程序中的 ng-if 和 ng-show 都不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30860721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-if and ng-show in my Ionic application, neither works
提问by Anusha
The html code goes something like this:
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>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
除了 ng-if，我也尝试过使用 ng-show。都没有工作。无论我使用哪个，约翰和玛格丽特都显示在页面上。我也尝试过 ng-switch。
The variable 'name' I initialized earlier on the same HTML file as:
我之前在同一个 HTML 文件中初始化的变量 'name' 如下：
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
单击上面的行会转到 Page3，我需要根据“name”的值在其中显示 John 或 Margaret。
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
是语法错误还是什么，因为这很有可能。我是 Ionic 和 AngularJS 的新手。
采纳答案by Michael
I fixed you plunker- now it should be working.
我修复了你的plunker- 现在它应该可以工作了。
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
错误 #1：ng-init 用于初始化而不是在运行时设置值 -> 改用 ng-click
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
错误 #2：您对所有页面使用相同的控制器，但对于每个页面都会初始化一个新控制器，这会重置“名称”属性
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
我实现了一个 setName 函数来在 rootscope 中设置名称并转到 page3。在正确的实现中，您应该将名称作为 $stateparam 传递给新的状态/页面。但为此请查看 ui-router 文档。
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};
回答by bonchenko
Try this:
尝试这个：
<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>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
为我工作。我只是将 ng-if 更改为 ng-show - 这将在 true 时显示 div 内容，否则将其隐藏。我也在 div 中使用了 ng-init。
回答by Michael
Are you sure you started Angular? Did you set the ng-app directive? It would help if you could provide a working example if you have other problems.
你确定你开始使用 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>