Question

我有一个嵌套状态。

与我的应用标题相关联的视图。

它看起来像这样：

<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">

                {{ showSubHeader}}
            <div ng-if="showSubHeader" class="topPull" draggable >
            <button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
                           </div>       
        </div>               

</div>
</ion-view>

现在，我想在showSubHeader为真时显示div。

表达式{{ showSubHeader }}正确地从true变为false，但div不会根据值变量隐藏/显示。

有没有办法解决它？

最初在页面加载时，div显示/隐藏，但加载后变量值更改时div不会隐藏。

控制器：

.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {

$scope.showHeader=true;
 $scope.showSubHeader=true;

  $scope.checkBill= function(){
      $scope.showSubHeader=false;
     $state.go('menu.TotalBill')

  }



})

Answer 1

将$scope.showSubHeader=false;更改为$scope.showSubHeader =!$scope.showSubHeader;，然后就可以了。

看看我的例子：

＆＃13;

var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
  $scope.test = true;
  $scope.hidden_test = true;
  $scope.click = function() {
    $scope.hidden_test = !$scope.hidden_test;
  };
}]);

＆＃13;

.outer {
  background: #e2e2e2;
  border: 1px solid #000000;
  .inner {
    background: #c2c2c2;
    border: 1px solid #00aa00;
    padding: 1px 0 0 25px;
  }
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div ng-app="app">
  <div ng-controller="myctrl">
    <div class="outer" ng-if="test">
      <p>Test</p>
      <div class="inner" ng-if="hidden_test">
        <p>Hidden Test</p>
      </div>
      <button ng-click="click()">Click</button>
    </div>
  </div>
</div>

＆＃13;

ng-if / ng-show仅在页面加载离子时才起作用

1 个答案: