根据ng-if表达式显示相应的DIV。 Angularjs

我想显示Turn On E-Verify当divienId有一个值，如果不是我想显示的div有Turn Off E-verify。我没有收到任何错误，但总是显示第二个div，并且按钮不起作用。我究竟做错了什么？根据ng-if表达式显示相应的DIV。 Angularjs

HTML：

<div class="col-md-12 col-centered" ng-app="CompanyEVerify"> 

     <div class="row" ng-controller="EVerifyOptionController"> 

      <form name="EverifyForm" id="EVerifyForm" class="form-horizontal" role="form" novalidate ng-submit="EVerifyForm.$valid && submit()" 
        style="background-color: #F0F0F0; border-radius: 8px; padding-top: 10px; margin: 15px !important;"> 

       <div class="alert alert-danger" id="messages" style="display:none">{{message}}</div> 
       <div class="form-horizontal"> 
        <input type="hidden" ng-model="company.Id" /> 

        <div class="row"> 
         <div class="col-md-12"> 

          <div style="font-size:20px;font-weight:bold;display:inline-block">Would you like to opt for E-Verify feature?</div> 

          <br /> 
          <div >         

           <div class="row" ng-if="clientId"> 
            <div class="col-xs-12 form-group"> 
             <label class="control-label col-xs-2">Client ID</label> 
             <div class="col-xs-7"> 
              <input type="text" name="clientID" class="form-control input-md" ng-model="clientID" /> 
             </div> 

             <button type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)"> 
              <i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify           
             </button>           
            </div> 
           </div> 
           <div class="row" ng-if="!clientId"> 
            <div class="col-xs-12 form-group"> 
             <label class="control-label col-xs-2">Client ID</label> 
             <div class="col-xs-7"> 
              <input type="text" name="clientID" class="form-control input-md" ng-model="clientID" /> 
             </div> 
             <button type="button" class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(clientID)"> 
              <i class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify 
             </button> 
            </div> 
           </div> 

          </div> 
         </div> 
        </div> 
       </div> 
      </form> 

     </div> 

    </div>

在我的控制器：

$scope.clientId= sessionStorage.clientId;

来源

2016-05-12 BumbleBee

我假设你在NG-重复或包裹的东西这些行，可以请你分享更多的来源。谢谢！ – 42shadow42

我不使用ng-repeat。它是一个文本框和一个页面上的按钮。 – BumbleBee

这可能是一个输入错误，我注意到你使用clientID代替了ng-model而不是clientId， – 42shadow42

我会假设你的控制器正确评估你的条件。在这种情况下，你会使用ng-class绑定到css类。我不确定如果您尝试隐藏/显示或停用切换。与显示/隐藏下去，你可以做一个类：

.hide{ 
    display:none; 
}

在您的要素之一：

<button ng-class="{'hide': clientId}" ></button>

在其他元素：

<button ng-class="{'hide': !clientId}" ></button>

现在双方的隐藏属性元素绑定到一个单一的来源。

退房文档example

来源

2016-05-13 00:46:10 ZenStein

根据ng-if表达式显示相应的DIV。 Angularjs

回答

相关问题