Question

我想显示当clienId有值时Turn On E-Verify的div如果不是我想显示具有Turn Off E-verify的div。我没有得到任何错误，但总是第二个div出现，按钮将无法正常工作。我做错了什么？

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;

Answer 1

我将假设您的控制器正在评估您的条件。在这种情况下，您将使用ng-class绑定到css类。我不确定您是否试图隐藏/显示或禁用切换。使用show / hide，你可以上课：

 .hide{
    display:none;
 }

在你的一个元素上：

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

在另一个元素上：

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

现在两个元素上的hide属性绑定到一个单独的源。

查看文档example

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

1 个答案: