ng-if不隐藏第二个元素

-1

我有两个控制器每两个视图和一个服务。服务对象存储第一个视图中的选定值。根据此选定值ng-if必须呈现第二个视图上的任一个元素。这是我的代码，应该执行此任务。ng-if不隐藏第二个元素

控制器的第一视图：

gasStation.controller('registrationController', ['$scope', '$log', '$http', '$window', 'customerType', function ($scope, $log, $http, $window, customerType) { 
    customerType.setCustomerType($scope.customerType); 
    url += '/pages/index.html#' + '/dashboard'; 
    $window.location.href = url; 
    $scope.customerType = customerType.getCustomerType(); 
    console.log(customerType.getCustomerType() + ' customer type from controller');};}]);

首先视图：

<div class="site-content"> 
     <h1 class="fueling-header">Registration</h1> 

     <form name="regForm" class="pure-form pure-form-aligned"> 
      <fieldset> 

       <!--<%--Type of customers--%>--> 
       <div class="pure-control-group"> 
        <label for="customerTypes">Your group</label> 
        <select id="customerTypes" ng-model='customerType'> 
         <option value="REGULAR">Regular</option> 
         <option value="BUSINESS">Business</option> 
        </select> 
        <label id="groupError" class="error"/> 
        {{customerType}} 
       </div> 
      </fieldset> 
     </form> 
    <!--END: register page-->

第二控制器

gasStation.controller('dashboardController', ['$scope', '$log', 'customerType', 
function ($scope, $log, customerType) { 
    $scope.customerType = customerType.getCustomerType(); 
    $scope.isBusiness = (customerType.getCustomerType() === 'BUSINESS'); 
    $scope.isRegular = (customerType.getCustomerType() === 'REGULAR'); 
    console.log($scope + ' dashboard controller');}]);

第二视图：

<div id="menu"> 
    <div class="pure-menu menu-width-restricted"> 
     <span class="pure-menu-heading"> 
      <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a> 
     </span> 

     <ul class="pure-menu-list">         

     <li class="fixed-height"> 
     <br/> 

     <div class="pure-menu-link"> 
      Hello, {{customerType}} 
     </div> 

     <div ng-if="isRegular"> 

      <li class="fixed-height"> 
       <a href="#/business_dashboard" class="pure-menu-link">{{customerType == 'REGULAR'}}</a> 
      </li> 
      <li class="fixed-height"> 
       <a href="#/business_dashboard" class="pure-menu-link">Revenue</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_gasstations" class="pure-menu-link">Stations</a> 
      </li> 

     </div> 

     <div ng-if="isBusiness"> 

      <li class="fixed-height"> 
       <a href="#/search_gasstations" class="pure-menu-link">Search</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_fuelings" class="pure-menu-link">Fuelings</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_vehicles" class="pure-menu-link">Vehicles</a> 
      </li> 

     </div> 

     <br/> 
     </li> 

     <li class="fixed-height"> 
     <hr/> 
     </li> 
     <br/> 
     <li class="fixed-height"> 
     <a href="#/logout" class="pure-menu-link">Log Out</a> 
     </li> 
     </ul> 
    </div> 
</div>

当我从第一个视图的下拉列表中选择REGULAR类型客户时，第二个视图<div ng-if="isRegular"></div>正在显示，并且<div ng-if="isBusiness"></div>未显示。

问题是当我从第一个视图中选择BUSINESS类型的客户，然后<div ng-if="isBusiness"></div>和<div ng-if="isRegular"></div>同时显示。但我只想显示<div ng-if="isBusiness"></div>

问题是什么，我该如何解决？

截图堆栈跟踪，当我选择正规的顾客：

当我选择业务类型的客户：

来源

2015-10-17 mr.M

我希望我能解释为什么这样的布局基于来自仪表板控制器的布尔值正确呈现。

<div id="menu"> 
<div class="pure-menu menu-width-restricted"> 

    <div ng-if="isRegular()"> 
     <span class="pure-menu-heading"> 
      <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a> 
     </span> 

     <ul class="pure-menu-list">         

      <li class="fixed-height"> 
      <br/> 

      <div class="pure-menu-link"> 
       Hello, {{customerType}} 
      </div> 

      <li class="fixed-height"> 
       <a href="#/search_gasstations" class="pure-menu-link">Search</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_fuelings" class="pure-menu-link">Fuelings</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_vehicles" class="pure-menu-link">Vehicles</a> 
      </li> 

      <br/> 

      <li class="fixed-height"> 
      <hr/> 
      </li> 

      <br/> 

      <li class="fixed-height"> 
      <a href="#/logout" class="pure-menu-link">Log Out</a> 
      </li> 

     </ul> 

    </div> 

    <div ng-if="isBusiness()"> 
     <span class="pure-menu-heading"> 
      <a href="/">GSS <img src="/resources/img/gss-icon.png" width="24" height="24"/></a> 
     </span> 

     <ul class="pure-menu-list">         

      <li class="fixed-height"> 
      <br/> 

      <div class="pure-menu-link"> 
       Hello, {{customerType}} 
      </div> 

      <li class="fixed-height"> 
       <a href="#/business_dashboard" class="pure-menu-link">Revenue</a> 
      </li> 

      <li class="fixed-height"> 
       <a href="#/view_gasstations" class="pure-menu-link">Stations</a> 
      </li> 

      <br/> 

      <li class="fixed-height"> 
      <hr/> 
      </li> 

      <br/> 

      <li class="fixed-height"> 
      <a href="#/logout" class="pure-menu-link">Log Out</a> 
      </li> 

     </ul> 

    </div> 

</div>

来源

2015-10-17 10:49:52

当您编辑您的选择，您的$ scope.customerType改变，不一定是你的customerType.getCustomerType（）方法。我不知道你为什么不工作，因为我不知道getCustomerType（）究竟做了什么。

$scope.customerType = customerType.getCustomerType(); 
    $scope.isBusiness = (customerType.getCustomerType() === 'BUSINESS'); 
    $scope.isRegular = (customerType.getCustomerType() === 'REGULAR');

您是否检查控制台中的错误？它可能不会评估ng-if，只是在发生错误时显示两者。

来源

2015-10-17 09:54:01 Noppey

我把控制台日志在第二控制器。我所看到的是：1.服务对象正确地从第一个视图传输信息，2.第二个控制器的$ scope包含客户类型。但是，ng-if仍然无法正常工作。 PS我添加了一个堆栈跟踪的截图。 –

我不确定你要在注册控制器中做什么。你正在控制器内部立即重定向？看来，如果您在该注册视图中更改您的选择，则不会发生任何事情。给你的代码。 – Noppey

是的，我在我的注册控制器中立即重定向。我已经解决了我的问题。看来问题出在我的仪表板视图中。 –

ng-if不隐藏第二个元素

回答

相关问题