javascript - ng-show 不适用于 Ionic 框架

标签 javascript angularjs ionic-framework ng-show

所以我只是想制作一个按钮,它会根据用户是否登录而变化。 这就是我想要的:

    <ion-view view-title="Settings">
       <ion-nav-buttons side="right">
 <a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
     Log Off
   </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
     Log On
   </button>
       </ion-nav-buttons>

由于某种原因,如果我没有登录,它只显示第二个按钮(登录按钮),如果我登录了,它根本不显示任何内容。 我什至直接将 ng-show 设置为 false 并注销为 true,它仍然给了我相同的结果:

  <ion-view view-title="Settings">
       <ion-nav-buttons side="right">
 <a href="#/camera"><img src="../img/camera.png" height="20%" width="20%" style="float:right; margin-right: 10px"></a>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
  <button ng-show="true" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
     Log Off
   </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="left">
   <button ng-show="false" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
     Log On
   </button>
       </ion-nav-buttons>

将登录按钮的 ng-show 值切换为 true 并将注销按钮切换为 false 将显示登录按钮。没有意义...这是我的 JS 代码:

     .controller("settingsController", function($scope, $cordovaSQLite, Settings, $location) {
       $scope.isLoggedOn = Settings.getLoggedOn();
       $scope.signIn = function(form) {
 console.log(Settings.logIn(form.email, form.password));
 console.log($scope.isLoggedOn);
 $scope.isLoggedOn = Settings.getLoggedOn();
       //  console.log($scope.isLoggedOn);

       };
       $scope.signOff = function() {
 Settings.logOff();
       };
     });

请注意,这些是代码片段,因此您可能找不到所有结束标记。基本上我的问题是,无论我对登录或注销按钮的 ng-show 做什么,注销按钮(第一个按钮)永远不会显示,无论我做什么。我尝试了 ng-if 也得到了相同的结果。

谢谢。

最佳答案

嗯,看起来像.. <ion-nav-buttons side="left">正在覆盖另一个..!

试试这个:

<ion-nav-buttons side="left" >
      <button ng-show="isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOn()">
        Log On
      </button>
      <button ng-show="!isLoggedOn" class="button button-full button-assertive" style = "margin-top: 0px;" ng-click = "signOff()">
        Log Off
      </button>
</ion-nav-buttons>

关于javascript - ng-show 不适用于 Ionic 框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34569317/

相关文章:

javascript - 如何使用 Sequelize 检索不属于多对多关联的所有记录

javascript - Angular 2 最终版本中的提供程序更改

javascript - 如何阻止/允许访问 document.styleSheets 信息,这是什么原因

javascript - 如何使用 Angular 更新 Kendo-UI 网格上的数据并保留层次结构选择?

ios - iOS 背景颜色上的状态栏

javascript - Backbone.js 过滤器集合返回一个对象,而不是集合

javascript - 显示从 PHP 调用到 angularJS 站点的数据

angularjs - 在 ng-change 上传递所选对象的其他属性

java - 从 cordova 插件 java 文件访问本地存储或 SQLite

javascript - 使用 ng-repeat 动态访问数组